Question

这是我在这里的第一个问题，虽然我使用堆栈溢出作为常规资源寻求帮助，但它始终让我重新回到正轨，因为我已经搜索并搜索过，但找不到答案。

我有一个响应式布局，当文本换成较小的屏幕尺寸时，我很难让我的ul保持左边距，这导致文本换行到位于图标下方的第二行或第三行维持保证金。我正在使用bootstrap，我的列表也使用icon标签作为bootstrap glyphicons而不是普通子弹，如下所示;

<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（在bootstraps之外）是

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

我尝试了很多不同的方法，但似乎都没有用，我最接近的是将跨度显示为阻止文本包裹在图标下方的块，但图标不能正确对齐文本看起来很糟糕，图标看起来有点凸起。

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

我目前正在使用一张桌子（不要打扰我，这只是暂时的最后手段，直到我弄明白）只是为了让它暂时看起来正确，但我真的很感激有关放入列表格式的一些帮助在所有屏幕尺寸。表格布局看起来很完美，对屏幕尺寸反应很好，但不是表格数据，而且还有很多代码用于一个带有星号的简单列表！

我期待任何人的建议（或被告知一个明显的解决方案，看起来像个白痴！）

非常感谢提前史蒂夫。

Answer 1

这是解决方案。在p文字周围打上li标记，将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;}

Answer 2

您是否尝试过使用:before实施？

这样的事情：

.startlist li span:before {

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

}

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

尝试了很长的一行，并没有在图标下面。

Twitter Bootstrap响应式文本换行

3 个答案: