如何创建三个相等的列表元素，并在两者之间具有相同的间距？

我想实现图像中有一个容器>行> Col（Bootstrap）然后三个ul li元素的布局。这个ul有一个边界。李元素需要流畅。排水沟需要四周平等。我怎样才能做到这一点？红线代表包装物的边缘（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%;}

然而，这使我有中间嵌段比我需要之间的更GUTER。

来源

2015-10-20 Al-76

请出示您的标记，你的努力。这是对SO提出问题的基本要求。 – isherwood

解决http://www.bootply.com/RY4LztvxiZ# –

使用flexbox，display: flex这对你来说很好。
或只设置margin-left上的所有3个元素，并忽略margin-right。
或设置margin-left和margin-right，但有ul：第一个孩子有一个更大的左边距。
或在0123上设置margin-left: .5%, margin-right:.5%，并在ul上设置额外 padding-left。

来源

2015-10-20 21:18:05

这是所有方框之间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

来源

2015-10-20 23:23:56

如何创建三个相等的列表元素，并在两者之间具有相同的间距？

回答

相关问题