CSS中的水平列表

在css中制作水平列表的最佳实践是什么？现在我知道这是一个非常基本的问题，但我要寻找的效果是在这样一个网站：

如果您向下滚动到包含4列列表的视频部分，您将看到它的良好用途。但如果我给出类似于

float:left

和

marginleft:#px

在CSS中，我的最后一个列表项总是在不接近div-box模型的边缘之前落在下一行

---

我听说这是因为盒子模型和边框/填充/边距，但是什么是克服这个问题的最好方法呢？我希望列表能够触及div的左右两侧，但这对我来说似乎是不可能的。

您希望首先将

边距和
填充设置为零，这样就不再具有列表中固有的缩进。（注意，您可能应该通过一个类来明确这一点，即，
ul class=“horizontal”
）

然后，浮动
li
并给它一个相对于
ul
宽度的宽度（以像素或百分比为单位）。但是，如果您想要绝对（例如，
1px
）分隔，则计算
li
s之间的
margin
对于百分比宽度可能更困难

EDIT-我忘了在最后一分钟将
.horizontal
类添加到所有选择器中

并且具有全盒效果：


列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项

ul.horizontal，
水平力{
保证金：0；
填充：0；
}
水平的{
列表样式类型：无；
宽度：400px；
背景：白烟；
溢出：自动；
保证金：0自动；
}
水平力{
浮动：左；
宽度：99px；
高度：99px；
保证金：0 1px 1px 0；
文本对齐：居中；
背景：url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=64&d=identicon&r=PG)中心不重复；
背景颜色：灰色；
颜色：白色；
}

您链接到的页面中的特定点使用以下CSS创建这些水平列表

.col{
    width: 24%;
    margin: 0 0 2% 1%;
    float: left;
}

有几种方法可以水平显示列表

1） 您可以将
li
：s设置为
display:inline
，内联元素的宽度、高度和填充的样式不能与块元素的样式相同，因此如果需要背景或边框，应使用：

2） 
display:inline block
在一行上显示
li
：s，同时保留块元素的功能，
inline block
适用于大多数浏览器，但对于IE7及以下版本，您可能需要使用
*display:inline
<代码>内联
和
内联块
元素受行高和字体大小的影响，您可能会在菜单项之间出现不必要的间隙，您可以通过在
ul
上将
字体大小设置为0并在
li
中将其设置回正常值来轻松解决此问题

3） 第三，您可以将
display:block
与
float:left
一起使用，float的问题是它不能像
display:inline block
那样居中，可以轻松地与
文本对齐：居中
一起使用，并且您必须记住清除父元素（
ul
上的
溢出：隐藏
就足够了）

4） 如果您需要列表跨越其父列表的整个宽度，最简单的方法是使用
display:table；宽度：
ul
上的100%
和
li
上的
显示：表格单元格
：s，使得
ul
的行为就像一个
表格
这可以很好地利用
框大小
属性（受所有浏览器支持，包括IE8）：给定无序列表（假设列表项都具有相同的高度）您可以将此样式指定给每个
：

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

否则，如果您不能确保每个
始终具有相同的高度，那么请使用
内联块
位置而不是
浮动
，使用纯CSS而不使用表结构/javascript基本上不可能做到这一点，另请参见

我使用了jQuery解决方案，它也在那里被建议过，而且效果非常好。找到链接

下面是代码：

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

 });​

var=0，
currentRowStart=0，
rowDivs=新数组（），
$el，
顶置=0；
$（'.blocks'）。每个（函数（）{
$el=$（此项）；
topPosition=$el.position（）.top；
if（currentRowStart！=topPosition）{
//我们刚来到一个新的一排。在完成的一排上设置所有的高度
对于（currentDiv=0；currentDiv
如果使用
float:left/right
，则不需要使用
display:block
。默认情况下，列表元素是
display:list item
，但这是真的，
display:block
没有任何区别。但是，如果使用
inline
或
inline block
，则永远不需要使用
float
贾里德和动力浮标就是一个例子。谢谢你没有评判我是新手和p
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);
   }

 });​