Twitter Bootstrap响应式ul文本换行

Question

这是我在这里提出的第一个问题，尽管我总是把Stack Overflow作为常规资源来寻求帮助并使我重新回到正确的轨道上，但现在我已经搜寻了很久，却找不到答案。

我拥有响应式布局，但我无法让我的ul在文本在较小的屏幕尺寸下换行时保持其左边距，这会导致文本换行到第二或第三行，而不是保持边距。我正在使用Bootstrap，并且我的列表也使用Bootstrap字符图标的图标标签，而不是普通的符号，如下所示;

<ul class="unstyled starlist">

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>

</ul>

我的CSS（除了Bootstrap之外）非常简单，如下所示：

.startlist li span {Margin-left:15px;}

我尝试了很多方法，但都不起作用。最接近的方法是将span显示为块，这样文字就不会在图标下换行，但是图标与文本的对齐就不正确了，看起来很糟糕，图标有点偏高。

我还在每个li中使用了2个div，并且内联左浮动，这种方法也可以，但当屏幕大小减小时，它就变得混乱了。我没有尝试媒体查询，因为我认为对于一个简单的列表，一定有更好的方法。我还尝试过list-style-image，但它也无法正确对齐文本。

目前我正在使用表格（暂时妥协），只是为了让它在短时间内看起来正确，但真的希望能够得到一些帮助，以便以列表格式呈现，并适用于所有屏幕尺寸。说实话，表格布局看起来非常完美，而且对屏幕尺寸的响应也很好，但它不是表格数据，对于一个简单的列表和一个星形符号来说，代码量太大了！

期待大家的建议（或者被告知显而易见的解决方案，然后感觉自己像个白痴！）。

谢谢大家！ Steve

- stevegnewman

---

这只是一个打字错误吗？class="starlist" - Rockbot

.starlist是我在网站上为这种特定样式的列表指定的类，所以请不要看错。谢谢，Steve。 - stevegnewman

是的 :) 我只是觉得在 CSS 和 HTML 中写法不同，一个是 starlist，另一个是 startlist... - Rockbot

哈哈，是的，你说得对，我道歉了。只是为了明确一下，我在实际网站中没有犯同样的错误。不过，很好地发现了这个问题;-) - stevegnewman

Answer 1

这是解决方案。将li文本用p标签包裹起来，将p的左边距设置为所需距离，并使用overflow:hidden。现在将<i>向左浮动。那应该可以了。

示例标记：

#left-column .advantages li {font: normal 14px arial; margin:0 0 10px 0; color:#333; list-style:none;}
#left-column .advantages li p {margin:0 0 0 20px; overflow:hidden;}
#left-column .advantages li i {float:left;}

- Joe

Answer 2

你尝试过使用:before实现吗？

像这样的东西：

.startlist li span:before {

  content: url(../star.jpg);

}

- Wez

---

嗨，感谢您提供的帮助。但是，它仍然无法正确换行文本，并且似乎不兼容IE浏览器，这是我更喜欢的。虽然如此，还是非常感谢您的帮助。 - stevegnewman

Answer 3

尝试在列表项上设置带有一些填充的背景。

ul.fancy-bullets {
    list-style-type:none;
}
ul.fancy-bullets li {
    background: url(../images/icons/star.png) left top no-repeat;
    padding-left: 2em;
}

已经尝试了一条长线，但它并没有在图标下面。

- freeMagee