Css Twitter引导响应ul文本包装

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

我有一个反应灵敏的布局，我正在努力让我的ul在文本以较小的屏幕大小换行时保持其左边距，这导致文本换行到第二行或第三行，该行位于图标下方，而不是保持边距。我正在使用引导，我的列表也使用引导图标的图标标签，而不是普通的项目符号，如下所示

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

我尝试过很多不同的方法，但似乎都不管用，最近的一种方法是将跨距显示为一个块，阻止文本在图标下环绕，但图标会与文本不正确对齐，看起来很糟糕，图标看起来略微升高

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

我目前正在使用一个表格（在我弄明白之前，这只是一个临时的最后手段），只是为了让它暂时看起来合适，但真的希望能得到一些帮助，将其转换成列表格式，在所有屏幕大小下都能工作。Tbh表格布局看起来很完美，对屏幕大小的反应也很好，但它不是表格数据，而且它有很多代码用于一个简单的列表，其中有一个星号

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

非常感谢

---

Steve。

在实施之前，您是否尝试过使用

：呢

大概是这样的：

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

我试过用一条长线，但它没有在图标下面。
下面是解决方案。在
li
文本周围加上
p
标记，将
p
边距设置为所需边距，然后使用
溢出：隐藏
。现在向左浮动
。这应该行得通

示例加价：

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

只是打字错误吗
class=“starlist”
。starlist是我在我的网站上为这种特殊样式的列表提供的类，所以没有看到任何打字错误。你好，史蒂夫。是的：）我只是觉得它用css和html写的不一样
starlist
和
startlist
…哈哈，是的，你是对的，我的道歉，只是为了清楚我没有注意到细节，我在我的实际网站上没有做同样的事情，不过很好；-）您好，谢谢，但是它仍然没有正确地包装文本，而且它似乎不是我喜欢的ie兼容。谢谢你的帮助。
#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;}