【问题标题】:Indent an unordered list without indenting the box model缩进一个无序列表而不缩进盒子模型
【发布时间】:2012-11-29 17:29:41
【问题描述】:

我想显示一个简单的、嵌套的、缩进的、无序列表,每个列表项之间都有边框。

我正在寻找一种解决方案来缩进<li> 的内容而不缩进整个元素。其实我的边界也是有意的。

示例: http://jsfiddle.net/kcRfT/

一种可能的解决方案是,从 <li> 节点获取缩进(左填充)并改用 text-indent(如上面的 jsfiddle 中所述)。

对于这个问题,还有其他更漂亮的解决方案吗?有什么想法吗?

问候尼尔

【问题讨论】:

    标签: html css html-lists


    【解决方案1】:

    也许您可以尝试在li 上使用负边距

    http://jsfiddle.net/5yV3P/1/

    【讨论】:

    • 感谢库尔特的回答。这是一个有趣的方法。你的例子不起作用。这种方法会导致与我的示例相同的行为(手动定义每个缩进级别)。对吗?
    • 您可以尝试在每个列表项上使用 CSS 内容属性来添加一些填充。 jsfiddle.net/5yV3P/2
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-06-04
    • 1970-01-01
    • 1970-01-01
    • 2015-02-16
    • 1970-01-01
    • 1970-01-01
    • 2022-01-15
    相关资源
    最近更新 更多