CSS 如何使多个inline-block元素占据容器的全部宽度

在本文中，我们将介绍如何使用CSS让多个inline-block元素占据容器的全部宽度，并提供相应的示例。

阅读更多：CSS 教程

方法一：使用text-align属性

通过设置父容器的text-align属性为”justify”，可以使多个inline-block元素占据容器的全部宽度。

<div class="parent">
  <div class="child">元素1</div>
  <div class="child">元素2</div>
  <div class="child">元素3</div>
</div>

.parent {
  text-align: justify;
}

.child {
  display: inline-block;
}

以上代码中，父容器的text-align属性被设置为”justify”，而子元素的display属性被设置为”inline-block”。这样，子元素会自动占据并平均分配父容器的宽度。

方法二：使用flexbox布局

另一种更先进的方法是使用CSS的flexbox布局。通过设置父容器的display属性为”flex”，并使用flex-grow属性来控制子元素的宽度。

<div class="parent">
  <div class="child">元素1</div>
  <div class="child">元素2</div>
  <div class="child">元素3</div>
</div>

.parent {
  display: flex;
}

.child {
  flex-grow: 1;
}

以上代码中，父容器的display属性被设置为”flex”，而子元素的flex-grow属性被设置为1。这样，子元素会自动占据并平均分配父容器的宽度。

示例演示

下面的示例将展示以上两种方法的效果。

<div class="container">
  <div class="method-1">
    <div class="child">元素1</div>
    <div class="child">元素2</div>
    <div class="child">元素3</div>
  </div>

  <div class="method-2">
    <div class="child">元素1</div>
    <div class="child">元素2</div>
    <div class="child">元素3</div>
  </div>
</div>

.container {
  margin-bottom: 20px;
}

.method-1 {
  text-align: justify;
}

.method-2 {
  display: flex;
}

.child {
  display: inline-block;
  background-color: lightblue;
  margin-right: 10px;
  padding: 10px;
  color: white;
}

在上述代码中，我们创建了一个具有两种方法的容器。第一种方法通过设置text-align属性来实现，第二种方法则使用flexbox布局。