Html 设置任意嵌套列表的样式
我有一个嵌套列表的结构,我正在尝试用CSS来设置它们的样式。我希望每个级别的缩进比上一个级别的缩进更多,但是我希望每个列表的上边框一直延伸到父列表的末尾。以下是我所拥有的:Html 设置任意嵌套列表的样式,html,css,Html,Css,我有一个嵌套列表的结构,我正在尝试用CSS来设置它们的样式。我希望每个级别的缩进比上一个级别的缩进更多,但是我希望每个列表的上边框一直延伸到父列表的末尾。以下是我所拥有的: <!DOCTYPE html> <html><head> <title>nested list test</title> <style type="text/css"> ul, li { margin: 0; padding: 0; list-sty
<!DOCTYPE html>
<html><head>
<title>nested list test</title>
<style type="text/css">
ul, li {
margin: 0; padding: 0; list-style: none;
}
#outer {
width: 300px; border: solid black 2px;
}
#outer ul {
border-top: solid #bbbbbb 1px;
}
#outer > li > ul > li > span {
padding-left: 30px;
}
#outer > li > ul > li > ul > li > span {
padding-left: 60px;
}
</style>
</head>
<body>
<ul id="outer">
<li><span>Item 1</span></li>
<li><span>Item 2</span>
<ul>
<li><span>Item 2a</span></li>
<li><span>Item 2b</span>
<ul>
<li><span>Item 2b1</span></li>
<li><span>Item 2b2</span>
<ul>
<li><span>Item 2b2a</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body></html>
嵌套列表测试
李先生{
边距:0;填充:0;列表样式:无;
}
#外{
宽度:300px;边框:纯黑2px;
}
#外ul{
边框顶部:实心#bbbb1px;
}
#外部>li>ul>li>span{
左侧填充:30px;
}
#外部>li>ul>li>ul>li>span{
左侧填充:60px;
}
- 项目1
- 项目2
- 项目2a
- 项目2b
- 项目2b1
- 项目2b2
- 项目2b2a
你可以在电视上看到它。当有3个关卡时效果很好,但是如果我加上第4个关卡,它就坏了。我可以添加更多的规则,使其适用于4个级别,但如果我添加第5个级别,它将被打破。等等我可以很容易地使用Javascript,但我想知道是否有一种方法可以让这个布局处理任何深度,只使用CSS,而不必提出新的规则。你可以跳一跳,除了外部列表,每个列表的左边距为-1000,左边距为+1030,这样,边框会向左延伸很远,并且根列表的溢出设置为隐藏。它仍然不会达到任意深度,但您可以通过更改数字来增加最大级别数,而无需添加额外的规则。如果没有每个级别的明确规则,我看不出如何做到这一点。但是,您可以避免像这样链接规则,但代价是增加一点标记:
<!DOCTYPE html>
<html><head>
<title>nested list test</title>
<style type="text/css">
ul, li {
margin: 0; padding: 0; list-style: none;
}
#outer {
width: 300px; border: solid black 2px;
}
#outer ul {
border-top: solid #bbbbbb 1px;
}
#outer .level1 li > span { padding-left: 30px; }
#outer .level2 li > span { padding-left: 60px; }
#outer .level3 li > span { padding-left: 90px; }
</style>
</head>
<body>
<ul id="outer">
<li><span>Item 1</span></li>
<li><span>Item 2</span>
<ul class="level1">
<li><span>Item 2a</span></li>
<li><span>Item 2b</span>
<ul class="level2">
<li><span>Item 2b1</span></li>
<li><span>Item 2b2</span>
<ul class="level3">
<li><span>Item 2b2a</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body></html>
我做了你说的事。我将边距和填充应用于除外部列表之外的所有列表,并将外部列表上的溢出设置为隐藏。它不是任意的,但至少它将规则的数量保持在可管理的水平。
!levels = 10
@for !i from 0 to !levels
#outer ul.level#{!i} > li
padding-left: #{!i*30}px