如何用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></p>标签包裹，确保换行）。 Flexbox的特性简化了水平和垂直方向的元素排列，无需复杂的定位计算。

通过这种方法，我们高效地实现了所需的姓名列表垂直排列效果。 Flexbox强大的布局能力使得代码简洁易懂，便于维护和扩展。