Rumah > hujung hadapan web > tutorial css > Bagaimanakah saya boleh memaparkan item senarai secara menegak sebagai lajur menggunakan CSS?

Bagaimanakah saya boleh memaparkan item senarai secara menegak sebagai lajur menggunakan CSS?

Susan Sarandon
Lepaskan: 2024-11-17 10:17:03
asal
284 orang telah melayarinya

How can I display list items vertically as columns using CSS?

Lajur CSS: Memaparkan Item Senarai Secara Menegak

Sebagai tindak balas kepada cabaran memaparkan item senarai secara menegak sebagai lajur, kami beralih kepada lajur CSS3. Ciri ini membolehkan kami mencapai reka letak yang diingini dengan mudah.

Pertimbangkan kod HTML berikut:

<div>
Salin selepas log masuk

Sekarang, kami akan menambah CSS untuk menggayakannya:

#limheight {
    height: 800px; /* Fixed height */
    -webkit-column-count: 3; /* WebKit prefix */
    -moz-column-count: 3; /* Mozilla prefix */
    column-count: 3; /* Standard */
}

#limheight li {
    display: inline-block; /* Necessary for columns to work */
}
Salin selepas log masuk

Dengan lajur CSS, bilangan lajur yang ditentukan (dalam kes ini, 3) dibuat secara automatik. Ia melaraskan lebar lajur secara dinamik semasa penyemak imbas mengubah saiz. Ini menyediakan barisan item senarai menegak yang diingini.

Nikmati kuasa lajur CSS untuk meningkatkan reka letak responsif anda dan memaparkan item senarai sebagai lajur dengan elegan!

Atas ialah kandungan terperinci Bagaimanakah saya boleh memaparkan item senarai secara menegak sebagai lajur menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan