在CSS中做水平列表的最佳做法是什么？现在我知道这是一个非常基本的问题，但我期待的效果是在这样一个网站：http://www.frontend2011.com/。在CSS中的水平列表
如果您向下滚动到具有4列列表的视频部分，您将会看到它的良好用法。但是如果我在CSS中给出float: left和margin-left: #px;之类的东西，我的最后一个列表项总是会落到下一行，而不会接近div框模型的边缘。
我听说这是因为盒子模型和边框/填充/边距，但什么是最好的方式来通过这个？我希望列表触及div的右侧和左侧，但这对我来说似乎不可能。
这可能是一个良好的使用box-sizing财产（所有浏览器的支持，IE8包括在内）：给定一个无序列表（假定列表项都具有相同的高度），你可以这种风格分配给每一个<li>：
li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float : left;
width : 25%;
padding : 15px; /* this will be applied internally, due to
box-sizing property */
}
那么，如果要强制结算，每4个li后，只需添加
li:nth-child(4n) {
clear : left;
}
否则，如果不能确保每<li>具有总是相同的高度，然后使用inline-block位置，而不是float。
您想要首先将margin和padding归零，因此您不再具有列表中固有的缩进。 （请注意，您应该通过一个班级来详细说明这一点，即ul class="horizontal"）。
然后，浮动li并给它一个相对于宽度（以像素或百分比）为宽度的宽度。但是，如果您想要绝对（例如，1px）分隔，则在li之间的margin的计算对于百分比宽度可能更加困难。
编辑 - 我忘了给所有选择器添加.horizontal类的最后一分钟添加。
并与全框效果：http://jsfiddle.net/MYLGv/9/
<ul class="horizontal">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
ul.horizontal,
ul.horizontal li {
margin: 0;
padding: 0;
}
ul.horizontal {
list-style-type: none;
width: 400px;
background: whiteSmoke;
overflow: auto;
margin: 0 auto;
}
ul.horizontal li {
float: left;
width: 99px;
height: 99px;
margin: 0 1px 1px 0;
text-align: center;
background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=64&d=identicon&r=PG) center center no-repeat;
background-color: gray;
color: white;
}
那你链接到页面特定地点使用以下CSS使这些水平列表。
.col{
width: 24%;
margin: 0 0 2% 1%;
float: left;
}
你这里的答案基本上是我说不行同样的事情。我已经使用了相同的代码，并且仍然推出了最后一列。因此，必须有更多的这个，我认为法布里奇奥回答上述 – Nerdysyntax 2012-03-02 17:56:49
水平显示列表有几种方式。
1）您可以设置li：s到display: inline，内联元素的宽度，高度和填充不能样式相同的方式块元素可以这样，如果你想的背景和边框，你应该使用：
2 ）display: inline-block在一行中显示li：s，同时保留块元素的功能，inline-block适用于大多数浏览器，但您可能需要在IE7及更低版本中使用*display: inline。 inline和inline-block元素受线高和字体大小的影响，并且您可能会在菜单项之间出现不必要的间隙，您可以通过将ul上的font-size设置为0并在li中将其设置回正常来轻松解决此问题：s 。
3）第三，你可以与float: left使用display: block，与浮动的问题是，它不能像display: inline-block容易中心可以text-align: center和你要记住清除父元素（overflow: hidden在ul是够）
4）如果您需要列表跨越其母公司的整个宽度，你可以做最简单的事情是在li上ul和display: table-cell使用display: table; width: 100%：S，使得ul表现就像一个table
如果你使用'浮动：左/ right'，你不需要'显示：它block'。 – 2012-03-02 16:29:29
那么，list元素默认是'display：list-item'，但是的确如此，'display：block'没有区别。但是，如果你使用'inline'或'直列block'你永远需要使用'float' – powerbuoy 2012-03-02 16:32:41
真棒例子Jared和的PowerBuoy。并感谢不要因为我是一个新手而对我进行评判，并且提供高质量的反馈信息，直至现在对我来说都是一场瘟疫。我将在稍后尝试这些例子。 – Nerdysyntax 2012-03-02 18:02:36
它基本上是不可能得到这个权利与纯CSS，而不是使用表结构/ JavaScript的，也看到here。
我用jQuery的解决方案，也建议有和它完美的作品。找到链接here。
而这里的代码：
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$('.blocks').each(function() {
$el = $(this);
topPosition = $el.position().top;
if (currentRowStart != topPosition) {
// we just came to a new row. Set all the heights on the completed row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = topPosition;
currentTallest = $el.height();
rowDivs.push($el);
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
// do the last row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
我看到li：nth-child（4n）{clear：left}在同一个网站中使用。但是那个让我困惑。 – Nerdysyntax 2012-03-02 16:40:34
让我们说，如果你有一个盛有液体的宽度和你，如果你想一定要始终显示4个项目每行，那么你应该指定一个规则，否则在一个固定宽度的容器，它是不是真的有必要 – fcalderan 2012-03-02 16:50:22
哦，gotcha。非常感谢。 – Nerdysyntax 2012-03-02 17:29:05