如何用CSS優雅地實現姓名列表的垂直排列？

優雅的CSS姓名列表垂直排列方案

本文介紹如何使用CSS優雅地實現姓名列表的垂直排列，效果如下：

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

實現的關鍵在於運用Flexbox佈局。我們將“姓名:”和姓名列表分別放置在兩個Flex容器的子元素中，通過調整Flex容器屬性，輕鬆達到預期效果。

以下代碼展示瞭如何使用簡潔的HTML結構和Flexbox實現該佈局：

<div style="display: flex;">
  <div>姓名：</div>
  <div>
    <p>張三</p>
    <p>李四</p>
    <p>王二麻</p>
  </div>
</div>

* {
  padding: 0;
  margin: 0;
}

代碼首先使用通配符*重置所有元素的內邊距和外邊距，避免默認樣式乾擾佈局。父級<div>設置為Flex容器( <code>display: flex; )，包含兩個子<div>：第一個顯示“姓名：”，第二個包含垂直排列的姓名列表（每個姓名用<code><p>標籤包裹，確保換行）。 Flexbox的特性簡化了水平和垂直方向的元素排列，無需複雜的定位計算。</p> <p>通過這種方法，我們高效地實現了所需的姓名列表垂直排列效果。 Flexbox強大的佈局能力使得代碼簡潔易懂，便於維護和擴展。</p>