Question

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

如果向下滚动到包含4列列表的视频部分，您会看到它的使用情况。但是如果我在CSS中提供类似float: left和margin-left: #px;的内容，我的最后一个列表项总是会落到下一行，甚至不会接近div框模型的边缘。

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

Answer 1

这可以很好地利用box-sizing属性（由所有浏览器支持，包括IE8）：给定一个无序列表（并假设列表项都具有相同的高度），您可以将此样式分配给每个{ {1}}：

<li>

然后如果你想在每4 ^th 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 */ }之后强制清算，只需添加

li

否则，如果您无法确定每个li:nth-child(4n) { clear : left; }的高度始终相同，请使用<li>位置而不是inline-block。

Answer 2

您希望首先将margin和padding归零，这样您就不再拥有列表中固有的缩进。（注意，你应该通过一个类，即ul class="horizontal"）来具体化。

然后，浮动li并给它一个相对（以像素或百分比表示）宽度ul宽度的宽度。但是，如果您想要绝对（例如，margin）分离，则li之间1px的会计处理对于百分比宽度可能会更加困难。

编辑 - 我忘了将.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;
}

http://jsfiddle.net/MYLGv/8/

Answer 3

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

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

2）display: inline-block在一行显示li：s，同时保留了一个块元素的功能，inline-block适用于大多数浏览器，但您可能需要使用*display: inline对于IE7及以下版本。 inline和inline-block元素受行高和字体大小的影响，您可能会在菜单项之间产生不必要的间隙，您可以通过将font-size设置为0来轻松解决此问题。 ul并在li：s。

中将其恢复正常

3）第三，您可以将display: block与float: left一起使用，浮动的问题在于它不能像display: inline-block那样轻松集中在text-align: center 和你必须记住清除父元素（overflow: hidden上的ul就足够了）

4）如果您需要列表覆盖其父级的整个宽度，那么您最简单的方法是使用display: table; width: 100%上的ul和{{1}上的display: table-cell }}：s，使li表现得像ul

Answer 4

您链接到的页面中的特定位置使用以下CSS来制作这些水平列表。

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

Answer 5

使用纯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);
   }

 });

CSS中的水平列表

5 个答案: