Bagaimana untuk Mencapai Lebar Yang Sama untuk Semua Item dalam Senarai Menggunakan CSS?

Lebar Sama untuk Semua Item dengan CSS

Dalam banyak situasi, anda mungkin inginkan reka letak yang semua item mempunyai lebar yang sama dengan lebar terluas elemen, walaupun apabila kesemuanya tidak sesuai pada satu baris. Ini boleh memberikan hasil yang lebih menarik secara visual dan padat.

Penyelesaian CSS

Walaupun JavaScript boleh digunakan untuk mencapai kesan ini, ia juga mungkin untuk mencapainya semata-mata dengan CSS. Pertimbangkan kod berikut:

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

Cara Ia Berfungsi

Kod CSS ini memanfaatkan gabungan flexbox dan inline-flex untuk mencapai reka letak yang diingini.

• .list-container: Elemen induk ini menetapkan susun atur mendatar senarai, memastikan ia muncul bersebelahan sebelah.
• .senarai: Elemen kanak-kanak di dalam .list-container dipaparkan sebagai lajur menegak terima kasih kepada flex-direction: column.
• .list-item: Setiap item individu menetapkan lebarnya agar sepadan item terluas menggunakan flex-wrap: wrap dan justify-content: flex-start. Ini memastikan bahawa semua elemen mempunyai lebar yang sama dengan elemen terluas dalam senarai.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Lebar Yang Sama untuk Semua Item dalam Senarai Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!