Bagaimana cara menggunakan CSS untuk melaksanakan susunan senarai nama menegak dengan elegan?

Skim Pengaturan Menegak CSS Elegant CSS

Artikel ini memperkenalkan cara menggunakan CSS untuk melaksanakan dengan elegan susunan senarai nama menegak, dengan kesan berikut:

<code>姓名:张三李四王二麻</code>

Kunci pelaksanaan adalah menggunakan susun atur Flexbox. Kami meletakkan "Nama:" dan senarai nama dalam elemen kanak -kanak kedua -dua bekas Flex masing -masing, dan dengan mudah mencapai hasil yang diharapkan dengan menyesuaikan sifat kontena Flex.

Kod berikut menunjukkan cara melaksanakan susun atur ini menggunakan struktur HTML yang bersih dan Flexbox:

<div style="display: flex;">
  <div>Nama:</div>
  <div>
    <p>Zhang San</p>
    <p>Li si</p>
    <p>Wang Erma</p>
  </div>
</div>

* {
  Padding: 0;
  Margin: 0;
}

Kod pertama menggunakan Wildcards * untuk menetapkan semula margin dalaman dan luaran semua elemen untuk mengelakkan gaya lalai yang mengganggu susun atur. Ibu bapa<div> Tetapkan ke Flex Container ( <code>display: flex; ), yang mengandungi dua subs<div> : Yang pertama memaparkan "Nama:", dan yang kedua mengandungi senarai nama yang diatur secara menegak (untuk setiap nama<code><p> Tag pakej, pastikan untuk membungkus garisan). Ciri -ciri Flexbox memudahkan susunan elemen dalam arah mendatar dan menegak tanpa pengiraan kedudukan yang kompleks.</p> <p> Melalui pendekatan ini, kami dengan cekap mencapai susunan senarai nama menegak yang dikehendaki. Keupayaan susun atur Flexbox yang kuat menjadikan kod ini mudah dan mudah difahami, dan mudah dikekalkan dan berkembang.</p>