Question

长标题，对不起。

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

但我不能用百分比来解决这个问题而且我没有得到它。想想我错过了一些明显的东西。它应该在一行上容纳3个项目！

每个li为32％，连续三个为96％，然后2％的左边距为102％，则为-0％的剩余边距为-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上没有负余量，但是使用＆＃34;：第一个孩子＆＃34;删除第一个LI的边距。选择器如this jsFiddle和下面的代码。

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;
}

希望有所帮助，
-Elijah

Answer 2

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

使用此

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

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

2 个答案: