Bagaimana untuk Memastikan Semua Item Senarai Mempunyai Lebar yang Sama dengan Item Terluas Menggunakan CSS?

Cara Menetapkan Lebar Item Seragam untuk Elemen Terluas Menggunakan CSS

Anda boleh mencapai susun atur yang diingini dengan menggunakan flexbox sebaris, seperti yang ditunjukkan dalam penyelesaian CSS yang disediakan:

.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;
}

Dalam CSS ini, kami menetapkan .list-container supaya mempunyai paparan flexbox sebaris, memastikan elemen .list anaknya dipaparkan secara mendatar. Elemen .list mempunyai paparan kotak flex menegak, membenarkan elemen .list-item anak mereka untuk disusun secara menegak.

Yang penting, elemen .list-item mempunyai sifat flex-wrap mereka yang ditetapkan untuk dibalut. Ini bermakna apabila mereka tidak boleh muat dalam satu baris dalam bekas .list mereka, mereka akan secara automatik membalut ke baris seterusnya.

Selain itu, kami menetapkan sifat justify-content untuk mula-flex untuk .list- elemen item, yang menyebabkannya menjajarkan ke tepi kiri bekas .list mereka. Ini memastikan bahawa item terpanjang menentukan lebar semua item dalam senarai.

Dengan melaksanakan CSS ini, anda boleh membuat reka letak di mana semua item mempunyai lebar yang sama dengan elemen terluas, memastikan konsisten dan menyenangkan dari segi estetika penampilan.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Semua Item Senarai Mempunyai Lebar yang Sama dengan Item Terluas Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!