gpt4 book ai didi

html - 设置任意嵌套列表的样式

转载 作者:可可西里 更新时间:2023-11-01 14:57:31 28 4
gpt4 key购买 nike

我有一个嵌套列表结构,我正在尝试使用 CSS 设置它们的样式。我希望每个级别的缩进都比前一个级别多,但我希望每个列表的顶部边框一直延伸到父列表的末尾。这是我所拥有的:

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

你可以在http://jsfiddle.net/pwaxQ/1/看到它.当有 3 个级别时它工作正常,但如果我添加第 4 个级别,它就会中断。我可以添加更多规则以使其适用于 4 个级别,但如果我添加第 5 个级别,它就会中断。等等。我可以很容易地让它与 Javascript 一起工作,但我想知道是否有一种方法可以让这个布局处理任何深度,只使用 CSS,而不必提出新规则。

最佳答案

你可以做一个小小的舞蹈,除了外部列表,每个列表都有 -1000 的左边距和 +1030 的左边距,这样边框向左延伸很远,根列表溢出设置为隐藏。它仍然不会变得任意深,但是您可以通过更改数字来增加最大级别数,而无需添加额外的规则。

关于html - 设置任意嵌套列表的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5876580/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com