Question

在this fiddle中，您可以看到横向规则并未完全（在数字下）。我想要它。我已尝试使用list-style-position:inside;，但这意味着我无法强制数字出现在正确的位置（因为浮动的左图像）。是否有使用CSS执行此操作的优雅方法，或者我是否必须自己生成编号然后进行适当的样式设计？

Answer 1

更新4

似乎Update 3在webkit上工作得很好但不是FF ...所以是时候使用真正的CSS功能了。

http://jsfiddle.net/J4b6Y/122/

更新3

现在怎么样？

http://jsfiddle.net/J4b6Y/105/

更新2

http://jsfiddle.net/J4b6Y/48/

<强>更新

如果它适合您，请尝试此操作

http://jsfiddle.net/J4b6Y/33/

Answer 2

您似乎很清楚list-style-position属性，因此您应该知道为什么横向规则不会在项目符号/数字下一直延伸。该列表左侧有一个填充，将列表元素推向右侧。他们的内容不会超出他们的空间:)。

以下是我解决问题的方法：http://jsfiddle.net/J4b6Y/14/

[编辑]

修复了webkit浏览器：http://jsfiddle.net/J4b6Y/16/

[EDIT2]

适用于所有浏览器且具有有效的HTML o_O http://jsfiddle.net/J4b6Y/37/

[EDIT3]

好的，这是另一个...... http://jsfiddle.net/J4b6Y/39/

Answer 3

我建议您删除hr标记和浮动图像属性。

如果无法使用css background设置图像，则可以执行以下操作：

HTML

<li>
    <img src="" alt="test"/>
    <p>Test</p>
</li>

CSS

li{
    border-bottom:1px solid black;
    list-style-position:inside;
}
li p{
     display:inline-block;   
}

此外，如果你可以删除p标签，你将节省很少的钱。

Answer 4

从问题的其他答案来看，虽然有很多方法可以通过CSS实现这一点，但是没有优雅的方式。因此，我首选的解决方案是适当地生成HTML和样式中的编号。如果页面是由服务器端脚本生成的，那么这很简单。

我将密切关注使用CSS解决此问题的更优雅方法，如果我发现任何问题，请更新此问题。

有序列表中的全宽水平规则

4 个答案: