Question

我正在研究我网站上的一个元素，但它给我带来了一些麻烦。

这就是我想要实现的目标：

enter image description here

我想使用<li> - 每个33％“列”的项目，重要的是列表的左侧或右侧没有边距。第一个list-element应该从容器开始的地方开始，最后一个元素应该在容器结束的地方结束，但同时，list元素必须是相同的宽度。

由于边距，宽度超过100％，最后<li> - 元素进入新行。我试过的其他所有内容都为<li> - 元素中的至少一个产生了不同的宽度。

我考虑过百分比差距，但如果可能，我真的想要30px。

巨大的问题是一切都需要响应，<li> - 宽度不能是固定值。

查看小提琴：http://jsfiddle.net/paelzersebbi/FAtVB/

这是我的HTML

<div id="wrapper">
   <ul>
      <li>Content 1</li>
      <li>Content 2</li>
      <li>Content 3</li>
   </ul>
   <div class="clear"></div>
</div>

和CSS

#wrapper {width: 80%; height: 300px; background: #F30;}
ul {list-style: none; margin: 0; padding: 0;}
li {width: 33.3%; height: 150px; float: left; background-color: #FFF; margin-right:10px;}
li:last-child {margin-right: 0;}
.clear {clear: both;}

感谢您的帮助！

Answer 1

如果你总是希望拥有30px而不是百分比，就像web-tiki之前所说的那样，你总是可以使用CSS3中的calc。浏览器支持相当不错（IE9 +）

li {
  width:calc( 33.33% - 30px );
  margin-left:30px
}

注意间距！ calc(33.33%-30px)无效;你实际上必须在hypen周围有空格：calc(33.33% - 30px)

Answer 2

您可以使用百分比边距，您只需要确保：

width of all <li> + all left/right margins = 100%

示例：

<强> DEMO

CSS：

li {
    width: 32.3%;
    height: 150px;
    float: left;
    background-color: #FFF;
    margin-right:1.5%;
}
li:last-child {
    margin-right: 0;
}

编辑：如果你的差距有一个纯色

您可以使用边框和box-sizing属性在宽度值中包含边框大小。

<强> DEMO

li {
    width: 33.33%;
    height: 150px;
    float: left;
    background-color: #FFF;
    box-sizing:border-box;
}

li:nth-child(1){
    border-right:20px solid #F30;
}
li:nth-child(2){
    border-left:10px solid #F30;
    border-right:10px solid #F30;
}
li:last-child {
    border-left:20px solid #F30;
}

Answer 3

尝试使用display：table，并显示：table-cell。

http://codepen.io/simply-simpy/pen/rpEqv

 <div id="wrapper">
      <ul>
      <li>Content 1</li>
      <li>Content 2</li>
      <li>Content 3</li>
   </ul>
   <div class="clear"></div>
</div>

CSS

   *, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
li { height: 150px; display: table-cell; padding-right:30px; background: silver; list-style-type: none; position: relative; }

li:after {
  content: "";
  display: block;
  width: 30px;
  background: red;
  height: 150px;
  position: absolute;
  right: 0;
  top: 0;

}
li:last-child:after {width: 0}
#wrapper {width: 100%; display: table}
ul {
  display: table; width: 100%;
  background: red;
  padding: 0;
}

Answer 4

您可以使用display: table来实现此目的。注意：这不是“表格布局”，因为它不会滥用HTML中的<table>语义。

您可以省略包装容器：

<ul>
    <li>Content 1</li>
    <li>Content 2</li>
    <li>Content 3</li>
</ul>

你的CSS：

ul {
    list-style: none;
    display: table;
    /* otherwise border-spacing would be collapsed */
    border-collapse: separate;
    /* I don't know, why it's x y here instead of y x (like for padding etc.) */
    border-spacing: 30px 0;
    /* your width + 2*30px because of negative margin */
    width: calc(80% + 60px);
    /* otherwise, left and right elements would have border-spacing */
    margin: 0 -30px; 
    padding: 0;
}

li {
    display: table-cell;
    width: 33.33333%;
    background-color: #fff;
    vertical-align: top;
    padding: 10px;
}

http://jsfiddle.net/kelunik/FAtVB/4/

但是，如果您想要另一种颜色作为<ul>的背景，则需要包装容器。

Answer 5

你可以使用css align-content：space-between;
更多关于它here

具有100％宽度和边距的浮动列表

5 个答案:

示例：