1

标题很长，不好意思。

<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/

4

2 回答 2

1

问题是因为 LI 的宽度是父元素的百分比（在本例中为 UL），但问题是当您在父元素上放置负边距时（在本例中为 -2%）使父元素为 102%，但您的计算仍然在父元素为 100% 的情况下进行，这会留下一个空间。解决这个问题并获得完美契合的唯一方法是在 UL 上没有负边距，然后使用像这个 jsFiddle和下面的代码的 ":first-child" 选择器删除第一个 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;
}

希望有帮助，
-以利亚

于 2013-07-25T03:14:45.877 回答
0

您试图以 % 为单位给出宽度，每个项目宽度为 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;
}
于 2013-07-25T02:31:14.040 回答