CSS中的水平列表

Question

在css中执行水平列表的最佳做法是什么？现在我知道这是一个非常基本的问题,但我正在寻找的效果是在这样的网站:http://www.frontend2011.com/.

如果向下滚动到包含4列列表的视频部分,您将看到它的良好用途.但是,如果我看到这样的信息float: left,并margin-left: #px;在CSS,我的最后一个列表项总是落在下一行甚至没有越来越接近DIV盒子模型的前边缘.

我听说这是因为盒子模型和边框/填充/边距,但是最好的方法是什么？我希望列表触及div的右侧和左侧,但这对我来说似乎不可能.

Answer 1

这可能是属性的一个很好的用途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-blockposition而不是float.