CSS 显示两行

CSS 显示两行

在网页设计中，有时我们需要显示两行内容并且让它们在同一行上显示，这在一些导航栏或者标题中是非常常见的。在CSS中，我们可以使用一些简单的技巧来实现这个效果。

使用display: inline-block

其中一种常见的方法是使用display: inline-block属性。这个属性可以让元素显示在同一行，并且可以设置它们的宽度和高度。

.container {
  width: 100%;
}

.item {
  display: inline-block;
  width: 50%;
  height: 50px;
  background-color: lightblue;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

运行结果：

Item 1 Item 2

使用flex布局

另一种比较常用的方法是使用flex布局。Flex布局是一个强大的CSS布局模型，可以让我们轻松地实现各种复杂的布局。

.container {
  display: flex;
}

.item {
  flex: 1;
  height: 50px;
  background-color: lightblue;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

运行结果：

Item 1 Item 2

通过以上两种方法，我们可以轻松地实现在网页中显示两行内容并让它们在同一行上显示。在实际项目中，可以根据具体需求选择合适的方法来实现想要的效果。