4

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

我有一个响应式布局，当文本以较小的屏幕尺寸换行时，我正在努力让我的 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>

我的（非常简单的）CSS（在引导程序之外）是

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

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

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

我目前正在使用一张桌子（不要打败我，这只是临时的最后手段，直到我弄明白为止）只是为了暂时看起来正确，但真的希望能在输入适用于所有屏幕的列表格式方面提供一些帮助尺寸。Tbh 表格布局看起来很完美，并且对屏幕尺寸的响应很好，但它不是表格数据，而且它有很多代码用于一个简单的列表，带有一个星号！

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

非常感谢史蒂夫。

4

3 回答 3

1

这是解决方案。在您的文本周围环绕一个p标签，将您的边距设置为您想要的任何内容，然后使用. 现在漂浮你的左边。那应该行得通。lipoverflow: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;}
于 2013-12-04T17:44:21.747 回答
0

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

像这样的东西：

.startlist li span:before {

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

}
于 2012-10-23T14:12:56.693 回答
0

尝试使用一些填充在列表项上设置背景。

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

尝试过长线，但它没有在图标下方。

于 2012-10-30T09:46:39.290 回答