html - 用行填充 <UL> 缩进

标签 html css

是否可以填写<UL>用线(或点或其他)缩进?

HTML

<ul>Foo
   <ul>Bar
      <ul>Foo
      </ul>
   </ul>
</ul>

结果

Foo 
-----Bar 
----------Foo

最佳答案

这不是一个通用的解决方案,但却是一个速战速决的解决方案:

HTML:

<ul>Foo
   <ul>Bar
      <ul>Foo
      </ul>
   </ul>
</ul>

CSS:

ul {
    margin: 0;
    padding: 0;
}
ul > ul:before {
    content: "------";
}

ul > ul > ul:before {
    content: "------------";
}

亲 body 验 jsFiddle !

关于html - 用行填充 <UL> 缩进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15269371/

相关文章:

css - 在 SASS 中结合包装和父元素?

html - 连续均匀地显示网格卡片元素,无空白

jquery - ul 被重叠的 div 隐藏

javascript - 如何让内容根据点击显示和隐藏内容

python - TemplateDoesNotExist at/Django?

javascript - 从 html 页面中删除 bgcolor 和 style 属性

javascript - wordpress:有没有办法 Hook 操作/过滤器调用

css - 下拉/切换的选项卡菜单(纯 css/html)

html - 如何让下拉菜单工作并将导航栏保持在顶部?

html - 使用 Bootstrap 平衡图像的文本叠加