Bagaimana untuk Memusatkan Senarai Tidak Tertib Tanpa Div Induk?-tutorial css-php.cn

Bagaimana untuk Memusatkan Senarai Tidak Tertib Tanpa Div Induk?

Mary-Kate Olsen

Lepaskan： 2024-10-31 08:17:30

asal

666 orang telah melayarinya

How to Center an Unordered List Without a Parent Div?

Memusatkan Senarai Tidak Tertib dengan Item Senarai Jajaran Kiri

Dalam reka bentuk web, keperluan untuk memusatkan senarai tidak tersusun sambil mengekalkan penjajaran kiri untuk item senarai sering timbul. Biasanya, ini dicapai menggunakan pembungkus

dengan text-align: center; dan penggayaan blok sebaris pada

Untuk mencapai matlamat ini, kaedah bukan konvensional mesti digunakan. Satu penyelesaian ialah memanfaatkan paparan: jadual; harta benda. Ia menukarkan

Berikut ialah coretan kod untuk penyelesaian ini:

<code class="CSS">ul {
  display: table;
  margin: 0 auto;
}</code>

Salin selepas log masuk

Contoh HTML:

<code class="HTML"><html>

<body>
  <ul>
    <li>56456456</li>
    <li>4564564564564649999999999999999999999999999996</li>
    <li>45645</li>
  </ul>
</body>

</html></code>

Salin selepas log masuk

Kaedah ini berkesan memusatkan

elemen, menghapuskan keperluan untuk pembalut
. Ia merupakan penyelesaian yang mudah dan boleh dipercayai untuk menjajarkan senarai tidak tersusun dalam reka letak yang kompleks.
Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Senarai Tidak Tertib Tanpa Div Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：CSS Flexbox vs Gridbox: Perbandingan Terperinci Artikel seterusnya：Bagaimana untuk Menjajarkan Teks Dalam Item Flexbox Apabila Kandungan Melebihi Lebar Item?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1724

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

1880

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1594

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...