为什么此列表中的文本不正确地浮动？

Question

我有一个列表。列表中的每个项目包含一个图标跨度和文本范围，像这样：

<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.

为什么文本不会浮在图标旁边？

Answer 1

嗯，努力使固定和流体宽度和谐共处......一个老问题。

这里有一个更新的拨弄解决方案：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%会使其扩展到浏览器窗口之外并创建一个水平滚动条。只需删除它。

Answer 2

width: auto将根据其内容指示文本跨度根据需要承担尽可能多的宽度。这是当该空间不可用时导致整个跨度缠绕的原因。

Answer 3

您应该在内部元素中使用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; 
} 

（相应地调整你的间距值）