如何在两者之间创建三个相等的列表元素？

Question

我正在尝试在图像中实现有容器的布局＆gt;行＆gt; Col（Bootstrap）然后是三个ul li元素。这个ul有边框。 li元素需要是流动的。天沟需要在四周平等。我怎样才能做到这一点？红线代表包装器的边缘（col-xs-12）

<ul>
    <li>BOX1 </li>
    <li>BOX 2</li>
    <li>BOX 3</li>
</ul>

 ul {border:1px solid #ddd}
 ul li {width:31.333%; min-height:300px;background:blue;float:left; margin-left:1%; margin-right:1%;}

然而，这让我在中间区块之间比我需要的更多。

Answer 1

• 使用flexbox，display: flex可以很好地为您做到这一点。

• 或仅在所有3个元素上设置margin-left，并忽略margin-right。

• 或设置margin-left和margin-right，但是有ul：first-child有一个 左边距较大。

• 或在li上设置margin-left: .5%，margin-right:.5%，并设置额外费用 ul。{/ 1>}

Answer 2

这是所有框之间border的示例。 border的一个问题是，它不支持百分比，但它也有效。您可以阅读有关此here的更多信息。

<强> HTML

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="wrapper">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>
  </div>
</div>

<强> CSS

.box {
  background:#3E8CB2; 
  float:left; 
  width:calc(100%/3);
  height: 150px;
  border-left: 4px solid white;
  margin: 20px 0 20px 0;
}

.box:last-child{
  border-right: 4px solid white; 
}

.wrapper{
  border-left: solid 2px red;
  border-right: solid 2px red;
  min-height: 190px;
}

<强> DEMO