爲什麼（浮動）列表項將下一行

我爲什麼（浮動）列表項將下一行

<footer class="meta"> 
    <ul> 
    <li><a href="#" class="numNotes">3 notes</a></li> 
    <li><a href="#" class="numComments">10 comments</a></li> 
    <li><a href="#" class="datePosted">3rd Feb 2011</a></li> 
    <li class="tags"> 
     <ul> 
     <li><a href="#">Tag name</a></li> 
     <li><a href="#">Tag name</a></li> 
     </ul> 
    </li> 
    </ul> 
</footer>

我很奇怪，爲什麼我的最後一個標籤項目進入到下一行

http://jiewmeng.kodingen.com/demos/folio-wip/index.html

來源

2011-02-03 Jiew Meng

頁腳內容太多，因此它會回到下一行。你期望的行爲是什麼？一條線？使腳更寬。 – 2011-02-03 14:34:18

@moontear，我希望頁腳伸展，畢竟，我還沒有設置固定的寬度，父母仍然有空間來伸展http://imgur.com/M1yVJ.png – 2011-02-04 02:06:14

你可以嘗試強制執行單行顯示，加入：

li.tags, 
li.tags > ul { 
    white-space: nowrap; 
}

正如其他人所指出的，但是，它下降到下一行，由於內容比寬度更大的寬度的父元素。

已經打得四處這一點，事實證明，對於white-space: no-wrap;工作，你想也需要在li元素使用display: inline;（或display: inline-block;）。

JS Fiddle demo。

來源

2011-02-03 14:42:26

第二個標籤名稱沒有空間可以浮動，因此它會下降到下一行。

如果你給父李多寬它將停留在同一行

來源

2011-02-03 14:35:35 nunopolonia

它只是溢出，因爲有太多的內容，以適應在父框。如果您在Firefox瀏覽器中安裝firebug，則可以非常輕鬆地檢查這些內容。

來源

2011-02-03 14:37:16 larsson

爲什麼（浮動）列表項將下一行

回答

相關問題