百分比宽度列表网格布局，<li> 上的百分比左边距和 <ul> 上的负百分比左边距

Question

标题过长，抱歉。

通常，当我使用列表进行网格布局时，<li> 和 <ul> 的宽度是固定的。然后我在<li> 上有一个左边距，然后我将它作为负左边距放在容器<ul> 上，从而将整个东西拉回并完美排列。

但是我不能让它与百分比一起使用，我不明白。认为我遗漏了一些明显的东西。它应该适合一行 3 个项目！

每个 li 为 32%，连续三个为 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/

Answer 1

问题是因为 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;
}

希望对您有所帮助，
-以利亚

Answer 2

您试图以 % 为单位给出宽度，每个项目宽度为 32%，变为 32*3 变为 96%，每个项目的边距为 2%，它变为总 102%，您的宽度为 100%，当前列表将无论您是否使用边距，始终根据您的容器宽度取宽度，您应该在总列表项上划分容器宽度，包括边距 http://jsfiddle.net/6DEv9/2/

使用这个

li {
    width: 31%;
    float: left;
    margin: 0 0 0 2%;
    list-style: none;
}