0

我有一个清单。列表中的每个项目都包含一个图标范围和文本范围，如下所示：

 <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;  }

我相信这段代码应该产生浮动在图标旁边的文本，并相应地自动调整其宽度。但是，情况并非如此，请参阅 jsfiddle。

为什么图标旁边没有浮动文本？

4

3 回答 3

2

width: auto将指示文本跨度根据其内容采用所需的宽度。当该空间不可用时，这就是导致整个跨度环绕的原因。

于 2013-03-11T15:43:11.913 回答
1

您应该在内部元素中使用 CSS 背景并浮动 LI。您不需要单独的图标元素。

#features li { float left }

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

请参阅我的教程：我喜欢列表。

如果要使用字体而不是图像，可以position:relative在 LI 上使用 , 并添加：

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

（相应地调整间距值）

于 2013-03-11T15:46:24.967 回答
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%会使它扩展到浏览器窗口之外并创建一个水平滚动条。只需将其删除。

于 2013-03-11T17:19:42.770 回答