css/html ul 表格行元素水平分布

Question

我试图将三个盒子均匀地分布在整行上。我尝试添加“宽度：100％”并删除最后一个孩子的填充，但它似乎没有解决问题。

最后，三个盒子应该有相同的宽度，分布在行的最大宽度上，它会根据屏幕大小自行调整。

.bottom_section {
  display: table;
  height: 100%;
}

.bottom_section ul {
  display: table-row;
  height: 100%;
}

.bottom_section ul li {
  width: 33.33%;
  height: 100%;
  display: table-cell;
  padding: 0 30px 20px 0;
}

.bottom_section ul li:last-child {
  padding-right: 0;
}

.bottom_section ul li div {
  padding: 25px 15px;
  height: 100%;
  background: right top no-repeat #FFF;
}

.bottom_section ul li div h3 {
  margin-bottom: 10px;
  padding-top: 35px;
  font-size: 18px;
  font-weight: 600;
  color: #FF5C1B;
  text-align: center;
}

.bottom_section ul li:first-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:nth-child(2) div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:last-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li div p {
  font-weight: 300;
  font-size: 14px;
  color: #6e6e6e;
  line-height: 24px;
}

<section class="bottom_section">
  <ul>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
  </ul>
</section>

提前感谢任何提示

编辑：在前几个答案之后，似乎实际上分布很好。问题是填充，因为除了最后一个子元素（0px）之外，所有元素都有 30px 的填充权。我向左右添加了填充，并且没有向“第一个孩子”添加左侧填充，但是中间的盒子更小了。仍在尝试并期待优雅的解决方案。谢谢

Answer 1

由于您需要一维格式，我建议使用flexbox

.bottom_section {}

.bottom_section ul {
  display: flex;
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.bottom_section ul li {
  width: 33.33%;
  padding: 0 30px 20px 0;
}

.bottom_section ul li:last-child {
  padding-right: 0;
}

.bottom_section ul li div {
  padding: 25px 15px;
  height: 100%;
  background: right top no-repeat #FFF;
}

.bottom_section ul li div h3 {
  margin-bottom: 10px;
  padding-top: 35px;
  font-size: 18px;
  font-weight: 600;
  color: #FF5C1B;
  text-align: center;
}

.bottom_section ul li:first-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:nth-child(2) div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:last-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li div p {
  font-weight: 300;
  font-size: 14px;
  color: #6e6e6e;
  line-height: 24px;
}

<section class="bottom_section">
  <ul>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
  </ul>
</section>

Answer 2

这似乎适用于底部部分宽度为 100% 的 Chrome。 （刚刚添加了绿色边框，因此它显示列） 你用的是什么浏览器？

.bottom_section {
  display: table;
  height: 100%;
  width:100%;
}

.bottom_section ul {
  display: table-row;
  height: 100%;
}

.bottom_section ul li {
  width: 33.33%;
  height: 100%;
  display: table-cell;
  padding: 0 30px 20px 0;
  border:1px solid green;
}

.bottom_section ul li:last-child {
  padding-right: 0;
}

.bottom_section ul li div {
  padding: 25px 15px;
  height: 100%;
  background: right top no-repeat #FFF;
}

.bottom_section ul li div h3 {
  margin-bottom: 10px;
  padding-top: 35px;
  font-size: 18px;
  font-weight: 600;
  color: #FF5C1B;
  text-align: center;
}

.bottom_section ul li:first-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:nth-child(2) div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:last-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li div p {
  font-weight: 300;
  font-size: 14px;
  color: #6e6e6e;
  line-height: 24px;
}

<section class="bottom_section">
  <ul>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
  </ul>
</section>