浮動可變寬度的列表項，而不必內容包

我有有這個行爲完全因爲我想在所有瀏覽器有點麻煩，但我發誓我以前做過這樣的：浮動可變寬度的列表項，而不必內容包

<!html> 
<head> 
    <style type="text/css"> 
    div { width:300px; } 
    ul { list-style:none; margin:0; padding:0; } 
    li { margin:0.25em 0.5em 0.25em 0; background:transparent url(http://cdn.iconfinder.net/data/icons/basicset/pencil_16.png) no-repeat scroll 0 0; float:left; } 
    a { padding-left:24px; } 
    </style> 
</head> 
<body> 
<div> 
    <ul> 
     <li><a href="/">Amazon</a></li> 
     <li><a href="/">Barnes &amp; Noble</a></li> 
     <li><a href="/">Books-A-Million</a></li> 
     <li><a href="/">Borders</a></li> 
     <li><a href="/">Indie Bound</a></li> 
     <li><a href="/">Powell's</a></li> 
    </ul> 
</div> 
</body>

這看起來在大多數現代瀏覽器中都不錯，但在IE 6和7中，「Books-A-Million」鏈接將會打包。

我想列表項目變量寬度和包裝到新行，但內部鏈接不包裝。我無法弄清楚顯示類型和CSS瀏覽器黑客的魔力組合，以使其工作。有沒有人解決過這個問題？

來源

2010-07-14 dmrnj

添加white-space: nowrap;到a標籤

來源

2010-07-14 13:55:37 ScottS

感謝您的答覆。我試過了，但即使Books-A-Million鏈接現在被強制轉到下一行，IndieBulding鏈接失去了它的填充並現在出現在背景圖標上。 – dmrnj 2010-07-14 13:58:37

將'display：inline-block;'或其他'hasLayout'觸發器添加到'a'標籤（假設不會搞亂其他任何內容）。如果這會導致其他瀏覽器出現問題（我認爲它不會），請通過您最喜歡的IE瀏覽器方式爲您的IE提供'zoom：1'。 – ScottS 2010-07-14 14:13:21

浮動可變寬度的列表項，而不必內容包

回答

相關問題