Question

我想在每个列表项的左侧创建一个带有几个图标的有序列表。我希望布局看起来像这样

<image1><image2> 1. Lorem Ipsum
<image2><image2> 2. Lorem Ipsum
<image3><image2> 3. Lorem Ipsum

我可以轻松地将图像放在列表项文本的右侧，但我似乎无法将它对齐到有序列表中每个数字的左侧。

Answer 1

这是Updated Solution。

HTML：

<ol class="img">
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
</ol>

CSS：

ol.img li{background: url("http://www.siguccs.org/Conference/Fall2007/images/icon_bullet.gif") no-repeat scroll 1px 5px transparent;
    list-style-position: inside;
    padding-left: 16px;}

Answer 2

解决方案很简单，它应该是这样的：

<ol>
<table>
<tr>
<td><image1 /></td>
<td><li>Lorem Ipsum</li></td>
</tr>
<tr>
<td><image2 /></td>
<td><li>Lorem Ipsum</li></td>
</tr>
<tr>
<td><image1 /></td>
<td><li>Lorem Ipsum</li></td>
</tr>
</table>
</ol>

我还没有测试过，我只是直接在这里编写代码，所以试一试......

解决方案基本上是将每个图像和文本放在一个表格中....

Answer 3

解决方案：在css之前使用伪元素：

    li {
    position: relative;
}
li:before {
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    left: -40px;
    background: url(http://www.hadley.edu/images/RightTriangleIcon.png);
    background-size: contain;
}

http://jsfiddle.net/poselab/Qcejy/

有序列表，每个列表项右侧有图像

3 个答案: