提问人：Bushwhacker 提问时间：7/21/2019 更新时间：7/21/2019 访问量：37
在 CSS 中设置宽度的嵌套列表意外块定位
Nested list unexpected block positioning with set widths in CSS
问：
我有嵌套列表，我正在测试这些列表，以理解我正在处理的带有幻灯片的下拉列表。在滑出发生之前，将“打开”嵌套列表，这些列表被移动以识别用户的“深度”。奇怪的是，我已经得到了预期的结果，但不明白为什么我不能使用块显示而不是内联块显示。
注意：实际菜单会展开，并且需要动态以备将来更改，因此手动设置打开空间不是一种选择。该列表应该能够在不匹配新间距的情况下添加/减少。
第一张图片是我想要的，但我需要对父级列表项的所有内容使用 inline-block，以便为嵌套列表“打开”。我终于明白了它是如何工作的，通过改变宽度并意识到任何没有空间放置在内联自动行中的列表项都会分解并垂直扩展其父级。是我一个人，还是这正是块显示应该做的？我不明白为什么当所有内容都被阻止显示时，嵌套列表不再在父列表中声明空间。
对不起，CSS有很多不必要的规则。我明确地将它们树化，以帮助查看在哪里。
感谢您的帮助！
使用 inline-block： 我得到了我想要的，但我认为它不应该被使用。不要相信菜单功能的潜在变化动态。
body {
padding: 50px;
}
ul, ul li, ul ul, ul label {
margin: 0;
padding: 0;
}
ul {
display: inline-block;
position: relative;
list-style: none;
font: normal 16px/30px Helvetica;
box-shadow: inset 0px 0px 0px 2px darkred;
width: 100px;
}
ul li{
display: inline-block;
width: 100px;
height: 30px;
box-shadow: inset 0px 0px 0px 2px forestgreen;
}
ul ul {
display: inline-block;
position: relative;
left: 50px;
box-shadow: inset 0px 0px 0px 2px red;
}
ul ul li {
display: inline-block;
width: 100px;
height: 30px;
box-shadow: inset 0px 0px 0px 2px lime;
}
ul ul ul{
display: inline-block;
position: relative;
left: 50px;
box-shadow: inset 0px 0px 0px 2px red;
}
ul ul ul li {
display: inline-block;
width: 100px;
height: 30px;
box-shadow: inset 0px 0px 0px 2px yellow;
}
ul li:hover {
background: #c3c3c3;
}
ul.main label {
display: inline-block;
position: relative;
left: 2px;
top: 2px;
width: 96px;
height: 26px;
box-shadow: inset 0px 0px 0px 2px darkblue;
}
ul.main ul label {
display: inline-block;
position: relative;
left: 2px;
top: 2px;
width: 96px;
height: 26px;
box-shadow: inset 0px 0px 0px 2px deepskyblue;
}
ul.main ul ul label {
display: inline-block;
position: relative;
left: 2px;
top: 2px;
width: 96px;
height: 26px;
box-shadow: inset 0px 0px 0px 2px aqua;
}<body>
<ul class="main">
<li><label> main</label>
<ul>
<li><label> second</label>
<ul>
<li><label> third</label></li>
<li><label> third</label></li>
<li><label> third</label></li>
</ul>
</li>
<li><label> second</label></li>
<li><label> second</label></li>
</ul>
</li>
<li><label> main</label></li>
<li><label> main</label></li>
<li><label> main</label></li>
<li><label> main</label></li>
</ul>
</body>带有显示块，我认为应该使用
body {
padding: 50px;
}
ul, ul li, ul ul, ul label {
margin: 0;
padding: 0;
}
ul {
display: inline-block;
position: relative;
list-style: none;
font: normal 16px/30px Helvetica;
box-shadow: inset 0px 0px 0px 2px darkred;
width: 100px;
}
ul li{
display: block;
width: 100px;
height: 30px;
box-shadow: inset 0px 0px 0px 2px forestgreen;
}
ul ul {
display: block;
position: relative;
left: 50px;
box-shadow: inset 0px 0px 0px 2px red;
}
ul ul li {
display: block;
width: 100px;
height: 30px;
box-shadow: inset 0px 0px 0px 2px lime;
}
ul ul ul{
display: block;
position: relative;
left: 50px;
box-shadow: inset 0px 0px 0px 2px red;
}
ul ul ul li {
display: block;
width: 100px;
height: 30px;
box-shadow: inset 0px 0px 0px 2px yellow;
}
ul li:hover {
background: #c3c3c3;
}
ul.main label {
display: inline-block;
position: relative;
left: 2px;
top: 2px;
width: 96px;
height: 26px;
box-shadow: inset 0px 0px 0px 2px darkblue;
}
ul.main ul label {
display: inline-block;
position: relative;
left: 2px;
top: 2px;
width: 96px;
height: 26px;
box-shadow: inset 0px 0px 0px 2px deepskyblue;
}
ul.main ul ul label {
display: inline-block;
position: relative;
left: 2px;
top: 2px;
width: 96px;
height: 26px;
box-shadow: inset 0px 0px 0px 2px aqua;
}<body>
<ul class="main">
<li><label> main</label>
<ul>
<li><label> second</label>
<ul>
<li><label> third</label></li>
<li><label> third</label></li>
<li><label> third</label></li>
</ul>
</li>
<li><label> second</label></li>
<li><label> second</label></li>
</ul>
</li>
<li><label> main</label></li>
<li><label> main</label></li>
<li><label> main</label></li>
<li><label> main</label></li>
</ul>
</body>
答：
1赞
Rob Kwasowski
7/21/2019
#1
我认为您需要做的就是不要指定元素的高度。设置 a 高度的问题在于，下一个将直接放置在下方，但如果不指定高度，则元素将展开以容纳其所有子元素，因此它看起来会像您想要的那样，因为标签仍将保持相同的大小limainlimain
body {
padding: 50px;
}
ul, ul li, ul ul, ul label {
margin: 0;
padding: 0;
}
ul {
display: inline-block;
position: relative;
list-style: none;
font: normal 16px/30px Helvetica;
box-shadow: inset 0px 0px 0px 2px darkred;
width: 100px;
}
ul li {
display: block;
width: 100px;
/* */
box-shadow: inset 0px 0px 0px 2px forestgreen;
}
ul ul {
display: block;
position: relative;
left: 50px;
box-shadow: inset 0px 0px 0px 2px red;
}
ul ul li {
display: block;
width: 100px;
box-shadow: inset 0px 0px 0px 2px lime;
}
ul ul ul {
display: block;
position: relative;
left: 50px;
box-shadow: inset 0px 0px 0px 2px red;
}
ul ul ul li {
display: block;
width: 100px;
box-shadow: inset 0px 0px 0px 2px yellow;
}
ul li:hover {
background: #c3c3c3;
}
ul.main label {
display: inline-block;
position: relative;
left: 2px;
top: 2px;
width: 96px;
height: 26px;
box-shadow: inset 0px 0px 0px 2px darkblue;
}
ul.main ul label {
display: inline-block;
position: relative;
left: 2px;
top: 2px;
width: 96px;
height: 26px;
box-shadow: inset 0px 0px 0px 2px deepskyblue;
}
ul.main ul ul label {
display: inline-block;
position: relative;
left: 2px;
top: 2px;
width: 96px;
height: 26px;
box-shadow: inset 0px 0px 0px 2px aqua;
}<body>
<ul class="main">
<li><label> main</label>
<ul>
<li><label> second</label>
<ul>
<li><label> third</label></li>
<li><label> third</label></li>
<li><label> third</label></li>
</ul>
</li>
<li><label> second</label></li>
<li><label> second</label></li>
</ul>
</li>
<li><label> main</label></li>
<li><label> main</label></li>
<li><label> main</label></li>
<li><label> main</label></li>
</ul>
</body>评论
0赞
Bushwhacker
7/21/2019
所以这看起来很棒，但我意识到我没有这样做是有原因的。如果你将鼠标悬停在鼠标上，你会发现它并没有按照我的意图工作。也许我需要做的就是让它保持这种正确的方式，放置一个 div 来缩小背景悬停大小，然后将子列表嵌套在该 div 下？不确定这最终是否有效，但我会搞砸它并发布它是否有效。
0赞
Bushwhacker
7/21/2019
你把我引向答案的正确礼仪是什么，但你现在发布的不是答案？我希望你得到答案的信用，因为我所说的 div 与你的答案完美配合。这确实节省了我的代码，因为内联块强制换行不允许边距获得正确的间距，现在一切正常。我应该发布代码，你添加为答案/编辑或其他东西，然后我可以给你答案吗？
0赞
Rob Kwasowski
7/21/2019
@Bushwhacker 你可以添加你自己的答案并说等等，也可以对我的答案投赞成票，因为它对你有帮助。我不确定是否有既定的礼仪，但我认为我所说的可能是最好的方法，因为你想为其他有同样问题的人展示正确的解决方案。Thanks Rob
0赞
Bushwhacker
7/21/2019
不不不哈哈。难道你没有得到一些更好的答案吗？
0赞
Rob Kwasowski
7/21/2019
@Bushwhacker但我认为，如果你发布自己的答案并给我投票是可以的，因为我没有想出完整的解决方案。
0赞
Bushwhacker
7/21/2019
#2
@rob-kwasowski，请将此作为答案发布，以便我信任您。非常感谢！
body {
padding: 50px
}
ul.main, ul.main li, ul.main ul, ul.main label {
margin: 0;
padding: 0;
}
ul.main {
display: inline-block;
list-style: none;
font: normal 16px/30px Helvetica;
box-shadow: inset 0px 0px 0px 2px darkred;
width: 100px;
}
ul.main ul {
display: block;
position: relative;
left: 50px;
width: 100px;
}
ul.main li {
display: block;
width: 100px;
box-shadow: inset 0px 0px 0px 2px forestgreen;
}
ul.main div {
display: inline-block;
width: 100px;
height: 30px;
}
ul.main div:hover, li.ended:hover {
background: #c3c3c3;
}
ul.main label {
display: block;
position: relative;
width: 100px;
height: 30px;
box-shadow: inset 0px 0px 0px 2px darkblue;
}<body>
<ul class="main">
<li><div><label> main</label>
<ul>
<li><div><label> second</label>
<ul>
<li class="ended"><label> third</label></li>
<li class="ended"><label> third</label></li>
<li class="ended"><label> third</label></li>
</ul>
</div>
</li>
<li class="ended"><label> second</label></li>
<li class="ended"><label> second</label></li>
</ul>
</div>
</li>
<li class="ended"><label> main</label></li>
<li class="ended"><label> main</label></li>
<li class="ended"><label> main</label></li>
<li class="ended"><label> main</label></li>
</ul>
</body>评论
0赞
Rob Kwasowski
7/21/2019
不，没关系。我很高兴得到一个赞成票。自己修复其余部分做得很好。
0赞
Bushwhacker
7/21/2019
来吧，去做吧，哈哈。它甚至不会让我在 2 天内选择自己的答案。我没有明确说悬停......你做到了。请回答:)
上一个：水平多维列表
评论