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

width: auto将指示文本范围根据其内容假设所需的宽度。这是导致整个跨度在该空间不可用时换行的原因。

Answer 2

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

如果您想使用字体而不是图片，可以在LI上使用position:relative并添加：

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

（相应地调整间距值）

Answer 3

啊，试图使固定和流畅的宽度和谐相处......一个老问题。

以下是解决方案的更新小提琴：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%会使其扩展到浏览器窗口之外并创建水平滚动条。只需将其删除即可。

为什么此列表中的文本没有正确浮动？

3 个答案: