css - Twitter Bootstrap 响应式 ul 文本换行

Question

这是我在这里提出的第一个问题，尽管我使用堆栈溢出作为常规资源来寻求帮助，直到现在它总是让我回到正轨，因为我已经搜索了又搜索却找不到这个问题的答案。

我有一个响应式布局，当文本以较小的屏幕尺寸换行时，我正在努力让我的 ul 保持其左边距，这导致文本换行到位于图标下方的第二行或第三行维持 margin 。我正在使用 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;}

我尝试了很多不同的方法，但似乎都不起作用，我最接近的方法是将跨度显示为一个 block ，它阻止文本在图标下换行，但图标将无法与文本正确对齐看起来很糟糕，图标看起来略微凸起。

我还在每个 li 中使用了 2 个 div 并向左内联 float ，直到屏幕尺寸减小并且一切变得困惑，我没有尝试媒体查询，因为我认为一个简单的列表必须有更好的方法。我还尝试了列表样式图像，但它也无法与文本正确对齐。

我目前正在使用一个表格(不要打我，这只是一个临时的最后手段，直到我弄清楚)只是为了暂时看起来正确，但真的很感激一些帮助将列表格式放入工作在所有屏幕尺寸。说实话，表格布局看起来很完美，并且对屏幕尺寸 react 良好，但它不是表格数据，而且它有很多代码用于一个带有星号的简单列表!

我期待任何人的建议(或者被告知一个明显的解决方案并看起来像个白痴!)

非常感谢 史蒂夫。

Answer 1

这是解决方案。包装 p标记你的 li文本，设置您的 p留给你想要的任何边距，并使用 overflow:hidden .现在 float 你的<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;}