在 css 中做水平列表的最佳做法是什么？现在我知道这是一个非常基本的问题，但我正在寻找的效果是在这样的网站中：http://www.frontend2011.com/。
如果您向下滚动到具有 4 列列表的视频部分，您会发现它的使用非常好。但是，如果我在 CSS 中给出 float: left 和 margin-left: #px; 之类的东西，我的最后一个列表项总是会落到下一行，甚至不会靠近 div 框模型的边缘。
我听说这是因为盒子模型和边框/填充/边距，但是克服这个问题的最佳方法是什么？我希望列表能够触及 div 的右侧和左侧，但这对我来说似乎是不可能的。
【问题讨论】：
标签： css
这可以很好地使用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 */
}
那么如果你想在每 4thli 之后强制清除，只需添加
li:nth-child(4n) {
clear : left;
}
否则，如果您不能确定每个 <li> 始终具有相同的高度，请使用 inline-block 位置而不是 float。
【讨论】：
有几种方法可以水平显示列表。
1) 您可以将li:s 设置为display: inline，内联元素的宽度、高度和填充不能像块元素一样设置样式，因此如果您想要背景或边框，您应该使用：
2) display: inline-block 将li:s 显示在一行，同时保留块元素的功能，inline-block 在大多数浏览器中有效，但您可能需要在 IE7 及以下版本中使用*display: inline。 inline 和 inline-block 元素受 line-height 和 font-size 的影响，您可能会在菜单项之间出现不需要的间隙，您可以通过将 font-size 设置为 0 ul 并设置它来轻松解决此问题在li:s 中恢复正常。
3) 第三，您可以将display: block 与float: left 一起使用，float 的问题是它不能像display: inline-block 那样轻松地与text-align: center 一起使用并且你必须记得清除父元素（ul上的overflow: hidden就够了）
4) 如果您需要您的列表跨越其父级的整个宽度，您可以做的最简单的事情是在ul 上使用display: table; width: 100%，在li:s 上使用display: table-cell，使@ 987654342@ 的行为就像 table
【讨论】：
float: left/right，你就不需要display: block了。
display: list-item，但这是真的，display: block 没有区别。但是，如果你使用inline 或inline-block，你永远不需要使用float
您想首先将margin 和padding 清零，这样您就不再拥有列表中固有的缩进。 （注意，您可能应该通过一个类来具体说明这一点，即ul class="horizontal"）。
然后，浮动li 并给它一个相对于ul 宽度的宽度（以像素或百分比为单位）。但是，如果您想要绝对（例如，1px）分隔，则对于百分比宽度而言，考虑 lis 之间的 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;
}
【讨论】：
使用纯 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);
}
});
【讨论】：