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

Question

我试图将三个盒子均匀地分布在整行中。我尝试添加“width: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>

提前感谢任何提示

编辑:在前几个答案之后，似乎实际上分布很好。问题是填充，因为所有元素都有 30px 的填充权，除了最后一个子元素 (0px)。我在左边和右边添加了填充，并且没有在“first-child”左边添加填充，但是中间的框变小了。仍在尝试并期待优雅的解决方案。谢谢

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>