CSS 显示元素垂直下来而不是水平直线

在本文中，我们将介绍如何使用CSS将元素垂直分布，而不是水平直线。在网页设计中，我们经常需要将元素按垂直方向排列，例如菜单、列表、按钮等。通过使用CSS，我们可以轻松地实现这一目标。

阅读更多：CSS 教程

使用display属性

要将元素垂直排列，我们可以使用CSS的display属性。默认情况下，元素的display属性值为block，这会使元素独占一行，并使其下面的元素处于新的一行。但我们可以通过设置display属性为inline-block来让元素在一行显示。

.element {
  display: inline-block;
}

上述代码将.element元素的display属性设置为inline-block，这样它就可以与其它元素在同一行上。同时，它会保留块级元素的特性，例如可以设置宽度和高度、添加边距和内边距等。

使用flexbox布局

另一种常用的方法是使用flexbox布局来将元素垂直排列。Flexbox布局提供了一种简便的方式来调整和排列元素的大小和位置。通过设置容器的display属性为flex，子元素将会按照指定的方向排列（默认为水平方向）。

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

上述代码将容器.container的display属性设置为flex，并且指定了flex-direction为column，这样它的子元素将会按照垂直方向排列。

使用CSS网格布局

CSS网格布局是CSS3中的新功能，可以更加灵活地控制元素的布局。通过使用网格容器和网格项，我们可以在网格中放置元素，并通过设置网格的行和列来控制元素的位置。

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 设置2列，等分可用宽度 */
  grid-gap: 10px; /* 设置元素之间的间隔 */
}

上述代码将容器.container的display属性设置为grid，并使用grid-template-columns设置了2列，并且每列的宽度平均分配。同时，通过设置grid-gap可以指定元素之间的间隔。

示例

假设我们有一个简单的水果列表，我们希望将水果名称按垂直方向排列。可以使用以下代码实现：

<ul class="fruit-list">
  <li class="fruit-item">苹果</li>
  <li class="fruit-item">香蕉</li>
  <li class="fruit-item">橙子</li>
  <li class="fruit-item">葡萄</li>
  <li class="fruit-item">西瓜</li>
</ul>

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

.fruit-item {
  margin-bottom: 10px;
}

上述代码通过将.fruit-list的display属性设置为flex，并将flex-direction设置为column，实现了将水果名称按垂直方向排列。同时，通过给.fruit-item添加margin-bottom属性，实现了元素之间的间隔。

总结

通过使用CSS的display属性，我们可以将元素垂直分布而不是水平直线。我们可以使用inline-block、flexbox布局或CSS网格布局来实现这一目标。根据实际应用的场景和需求，选择适合的方法来布局和排列元素。使用这些技术，我们将能够更好地控制网页的布局，并使其更具吸引力和可读性。