考虑以下嵌套列表:
<div >
<ul class="main">
<li><a href="#">Fist item</a><ul class="ab"><li>a1</li><li>a2</li><li>a3</li><li>a4</li></ul>
</li>
<li><a href="#">Second item</a><ul class="ab"><li>b1</li><li>b2</li><li>b3</li><li>b4</li></ul></li>
<li><a href="#">Third item</a><ul class="ab"><li>c1</li><li>c2</li><li>c3</li><li>c4</li></ul>
</li>
</ul>
</div>
我希望外层水平显示,内层显示在外层正下方。为此,我在 css 样式中对外部和内部列表使用了相对和绝对位置:
#container {width:300px}
main {width:200px;position:relative;}
body > div > ul > li {display:block;float:left;padding:5px;}
body > div > ul > li > a:hover + .ab {display:block;}
.ab {display:none;clear:both;position:absolute;left:0px}
除非您将容器宽度调整为 200px(因为您可以在 JSfiddle 上尝试),否则它工作正常(我必须实现一个使用不同宽度的解决方案)。在这种情况下,内层容器与外层容器重叠。我想知道是否可以通过css强制显示内部容器在外部容器之后显示,或者通过其他方式解决这个问题。
编辑:我需要让我的问题更清楚,因为到目前为止给出的答案显示了与我相同的建议 already制成。所以我在 css 样式中添加了一些内容,为内部容器声明了一个框(这里是更新 JSfiddle snippet )。关键问题是我的玩具示例模拟了更复杂网页中的左栏。我事先不知道这样一列的确切宽度(可能是 150 像素,可能是 200 像素或类似的东西),我也不知道外部列表元素的标题长度。我需要一个适用于外部容器可能具有的任何宽度的解决方案。
这是我在默认情况下获得的屏幕截图:
这是我将外部容器缩小到 200px 得到的结果(在 JSfiddle 上自己试试):
而这正是我想要获得的:
我希望我的问题现在已经清楚了。
最佳答案
你需要让外层定位为相对的,内层定位为绝对的,像这样:
#container {width:300px}
.ab {
display:none;
clear:both;
position:absolute;
left:0px
}
body > div > ul > li {
display:block;
float:left;
padding:5px;
position:relative;
}
body > div > ul > li > a:hover + .ab {
display:block;
position:absolute;
left:0; /* So it aligns to the left edge of outer level */
top:100%; /* So inner level isn't overlaping outer */
}
main {width:200px;position:relative;}
关于html - 在嵌套列表中定位 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34709545/