这是我在这里的第一个问题，尽管我使用堆栈溢出作为常规资源来提供帮助，并且它始终使我回到正轨，直到现在我已经搜索和搜索并且找不到答案。
我有一个响应迅速的布局，当文本包装在较小的屏幕尺寸时，我正在努力使我的UL保持左侧边缘，这导致文本包装到第二或第三行，而将其定位在图标下的位置维持边距。我正在使用bootstrap，我的列表还使用图标标签作为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（在引导程序之外）是
.startlist li span {Margin-left:15px;}
我尝试了许多不同的方法似乎都没有起作用，我最近以最接近的是显示跨度作为一个块，它阻止了文本在图标下包装，但是图标将不正确地与文本保持一致看起来很糟糕，图标看上去略微提高。
我还使用了每个LI中的2个Divs，并在左内线上浮动，该divs的工作原理直到屏幕尺寸减小并且一切都变得杂乱无章，我没有尝试媒体查询，因为它认为一个简单的列表必须有一个更好的方法。我还尝试了列表式图像，但也无法正确地与文本保持一致。
我目前正在使用一张桌子（不要击败我，这只是暂时的最后手段），直到我弄清楚它），以便暂时看起来正确，但真的很高兴能在列出有效的列表格式中提供一些帮助在所有屏幕尺寸上。tbh表布局看起来很完美，并且对屏幕尺寸的响应很好，但它不是表格数据，并且它的大量代码适用于标准的标准！
！我期待任何人的建议（或被告知明显的解决方案并看起来像一个白痴！）
非常感谢史蒂夫
这是解决方案。将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;}
您是否尝试过使用:before实现？
类似的东西：
.startlist li span:before {
content: url(../star.jpg);
}
尝试在列表项目上设置带有一些填充的背景。
ul.fancy-bullets {
list-style-type:none;
}
ul.fancy-bullets li {
background: url(../images/icons/star.png) left top no-repeat;
padding-left: 2em;
}
已经尝试了一条长线，并且不在图标下方。