爲什麼此列表中的文本不正確地浮動？

我有一個列表。列表中的每個項目包含一個圖標跨度和文本範圍，像這樣：爲什麼此列表中的文本不正確地浮動？

<ul id="features"> 
    <li> 
     <span class="icon"></span> 
     <span class="text">blah blah blahlrceoahuoa steohuasnoet huntaoheu saoetnhu saoetuhsaoe tuhsaoetnhu saoehtuasoetnhu saou</span> 
    </li>    
</ul>

使用下面的CSS

#features { list-style-type: none; } 
#features li { overflow: auto;} 
#features li span { float: left; } 
#features .icon { background: #000; height: 55px; width: 55px; display: inline-block;} 
#features .text { margin-left: 24px; display: inline-block; }

我認爲此代碼應生產出下一個浮動的圖標文本，並自動調整其寬度相應。但情況並非如此see jsfiddle.

爲什麼文本不會浮在圖標旁邊？

來源

2013-03-11 willdanceforfun

這是你想要的嗎？ http://jsfiddle.net/dwZaN/6/ – 2013-03-11 16:02:10

嗯，努力使固定和流體寬度和諧共處......一個老問題。

這裏有一個更新的撥弄解決方案：http://jsfiddle.net/dwZaN/11/

#features { list-style-type: none; margin-top: 24px; margin-right: 24px; } 
#features li { margin-bottom: 24px; overflow: auto; width: 100%; } 

#features li span { } 
#features .icon { background: #000; height: 55px; width: 55px; float: left; } 
#features .text { padding-left: 75px; display: block; }

基本上...

浮法您的固定寬度的圖標
不浮動的可變寬度的元素，但給它填充剩下足夠的空間來解釋你的圖標和一些緩衝空間（這會自動給它100％並減去你指定的任何填充）
這兩個元素都應該是塊級別的。你實際上並不需要指定圖標什麼，但你的文本範圍必須display: block（或者你可以切換到DIV的它們已經塊級）

此外，因爲您指定的右邊距在您的父母UL中，添加width: 100%會使其擴展到瀏覽器窗口之外並創建一個水平滾動條。只需刪除它。

來源

2013-03-11 17:19:42 Justin

實際上，你在jsfiddle上的解決方案對我來說並不奏效，但你的建議確實如此。你確定小提琴的作品嗎？ – willdanceforfun 2013-03-11 17:48:34

確實，我不小心使用了jsfiddle的一箇舊版本作爲調整。更新了鏈接和代碼示例。很高興它的工作！ – Justin 2013-03-11 19:59:11

width: auto將根據其內容指示文本跨度根據需要承擔儘可能多的寬度。這是當該空間不可用時導致整個跨度纏繞的原因。

來源

2013-03-11 15:43:11

啊......但我沒有寬度更新的jsfiddle（和問題）：汽車，我仍然看到圖標 – willdanceforfun 2013-03-11 15:44:56

@cosmicbdog下面的div.text： 'width：auto'是默認行爲，所以簡單地移除'width'將會產生相同的效果。您需要手動指定寬度。 – 2013-03-11 15:46:22

感謝您的解釋。也許我是在做夢，但我記得有一個顯示器2×跨度：inline-block的應自動調整以適應對方 - 我在這裏努力了可擴展的解決方案，而固定寬度。有關於此的任何想法？ – willdanceforfun 2013-03-11 15:51:59

您應該在內部元素中使用CSS背景並將LI浮動。您不需要圖標的單獨元素。

#features li { float left } 

#features li span { 
     display:block; 
     background-image: url(...); 
     background-repeat:no-repeat; 
     height:25px; 
     padding-left:30px; 
}

請參閱我的教程：I love lists。

如果你想使用的字體，而不是圖像，你可以使用position:relative，您LI並添加：

li:before { 
    content: "\25A0"; <--- this is a UTF-8 square 
    left: -1em; 
    position: absolute; 
    top: 0.1em; 
}

（相應地調整你的間距值）

來源

2013-03-11 15:46:24

我通常會這樣做，但是我在當前場景中使用字體圖標，而不是圖像:(除非您知道用字體制作背景的方法嗎？ – willdanceforfun 2013-03-11 15:47:44

是的，您當然可以這樣做。我的答案包括這個 – 2013-03-11 15:52:12

這是有創意的，我從來沒有想過要做到這一點，這是一個很好的選擇，謝謝 – willdanceforfun 2013-03-11 18:02:02

爲什麼此列表中的文本不正確地浮動？

回答

相關問題