n個子漂浮在列

我這裏有這個網站n個子漂浮在列

<ul> 
    <li><a href="#">home</a></li> 
    <li><a href="#">tours</a></li> 
    <li><a href="#">mission</a></li> 
    <li><a href="#">contact</a></li> 
    <li><a href="#">resources</a></li> 
    <li><a href="#">explorers</a></li> 
</ul>

我想取前三，浮它留在左欄最後三個浮動權利。我無法使它正常工作，它們全部對齊，並且沒有以正確的順序出現。我標記了這樣的CSS：

li:nth-child(-n+3) {float: left;}, 
li:nth-child(n+4) {float: right;}

我錯過了什麼？謝謝！

編輯添加的HTML鏈接：HERE IS THE PAGE

來源

2012-09-28 Kim

在你的第一行結尾是否有逗號在這個問題中出錯？否則，這是你的一個顯示錯誤的原因。 – BoltClock

定義工作，你想要什麼/期望看到什麼？ – ultranaut

對不起，該頁面在這裏：http://kimwilddesigns.com/TrailGuide_website/TrailGuide_website-class/index_fluid.html 縮小到智能手機的寬度，我想列出2列。第一列有家庭旅行和任務。我把背景顏色放在那裏，以便更好地看到它。謝謝。 – Kim

我fiddled有點用CSS3列。這是令人驚訝的簡單，實際上是：

ul { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count: 2; 

    -moz-column-gap: 0; 
    -webkit-column-gap: 0; 
    column-gap: 0; 
}

基本上，你定義包含列表上的兩列，這樣第一個列表項目將放在第一列和其他在第二列結束。默認情況下，瀏覽器將列之間的間距設置爲大約1em，因此您需要將其設置爲0以摺疊該空間。如您所料，browser support for this is limited to modern browsers如Firefox 1.5+，Safari 3+，Chrome，IE10和Opera 11.1+。

如果要調整列之間的平衡，可以使用column-break-before在特定元素之前強制列中斷。例如，如果你想在第一欄和第二欄剩下的只有兩個項目，你可以添加這個片斷：

li:nth-child(3) { 
    -moz-column-break-before: always; 
    -webkit-column-break-before: always; 
    column-break-before: always; 
}

遺憾的是，只有Safari瀏覽器3 +，Chrome瀏覽器，IE10和Opera 11.1的支持column-break-before在寫作時間。 Firefox尚未實現此功能。

來源

2012-09-28 19:19:00

嗨，感謝您的建議並回復！我試圖使用簡單的第n個孩子，因爲css3列尚未得到廣泛支持。所以我想它不可能？ – Kim

@Kim恐怕不是。您可以使用浮動功能進行很多操作，但是當所需的顯示順序與來源順序差別很大時，它們就會短缺。 –

你的確可以使用第n個孩子。這是我最近碰到的一個例子。它設置了多個屏幕寬度並進行相應調整：http://codepen.io/bradfrost/full/xkcBn

它使用簡單的無序列表。

來源

2014-05-01 15:21:34

n個子漂浮在列

回答

相關問題