长标题,对不起。
通常,当我使用列表进行网格布局时,我在<li>
和<ul>
上具有固定的宽度。然后,我在<li>
上留有一个左边距,然后将其作为容器<ul>
上的负左边距放置,从而将整个东西拉回并完美地对齐。
但是我无法使它与百分比配合使用,我也无法理解。认为我缺少明显的东西。它应该在一条线上容纳3个项目!
每个li为32%,连续三个li为96%,然后2%的左边距为102%,然后ul -2%上的左边距为负,以再次平衡。
一些HTML
<div class="container">
<div class="row">
<ul>
<li><div class="inner">Item 1</div></li>
<li><div class="inner">Item 1</div></li>
<li><div class="inner">Item 1</div></li>
</ul>
</div>
</div>
一些CSS
.container {
padding: 30px;
}
.row {
width: 100%;
overflow: hidden;
}
ul {
margin: 0 0 0 -2%;
padding: 0;
overflow: hidden;
}
li {
width: 32%;
float: left;
margin: 0 0 0 2%;
list-style: none;
}
.inner {
border: 1px solid #ccc;
padding: 10px;
}
还有一个厚脸皮的小提琴
http://jsfiddle.net/davidpauljunior/6DEv9/
另一个小提琴在这里展示了它如何使用PIXELS和负边距工作。目的是使3个项目完全适合一条直线。
http://jsfiddle.net/davidpauljunior/6DEv9/5/
最佳答案
造成此问题的原因是LI的宽度是父元素的百分比(在这种情况下为UL),但是问题是当您在父元素上设置负余量(在这种情况下为-2%)时,使父元素的大小变为102%,但是您仍然无法从父元素100%的计算中得出结果,这留出了空间。要做到这一点并获得完美匹配的唯一方法是在UL上不留负余量,然后使用“:first-child”选择器(如this jsFiddle)和下面的代码删除第一个LI的余量。
ul {
background-color: red;
list-style: none outside none;
overflow: hidden;
padding: 6px 0;
}
li {
background-color: #FFF;
float: left;
margin-left: 2%;
width: 32%
}
li:first-child {
margin-left: 0;
}
希望能有所帮助,
-以利亚
关于css - 百分比宽度列表网格布局,其中<li>上的左边距为百分数,而<ul>上的左边距为负百分数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17848002/