1

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

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

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

4

3 回答 3

1

这是更新的解决方案。

的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;}
于 2013-05-20T13:14:10.583 回答
0

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

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

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

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

于 2013-05-20T13:00:54.640 回答
0

在css中使用 :before 伪元素的解决方案：

    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/

于 2013-05-20T13:28:55.963 回答