在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