Question

我想在 well 元素中显示li元素的嵌套列表。但嵌套元素是重叠的。我创建了一个jsFiddle来演示我的问题。你可以在这里观看http://jsfiddle.net/pcXaS/。有谁知道如何解决这个问题？我还测试了位置/显示，但它也不起作用。

感谢您的帮助！

重现问题的代码段：

HTML

<div class="well">
    <ul class="navpoint-sort">
        <li>Point 1</li>
        <li>Point 2
            <ul class="navpoint-sort">
                <li>Point 2.1</li>
                <li>Point 2.2</li>
            </ul>
        </li>
        <li>Point 3</li>
        <li>Point 4</li>
        <li>Point 5
            <ul class="navpoint-sort">
                <li>Point 5.1</li>
                <li>Point 5.2</li>
            </ul>
        </li>
    </ul>
</div>

CSS

ul.navpoint-sort {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.navpoint-sort > li {  
    position: relative;
    height: 65px;
    margin: 0 0 5px 0;
    padding: 0;
    background-color: #f9f9f9;
    border: 1px solid #DED8D8;
    border-radius: 4px;
    clear: both;
}
ul.navpoint-sort > li:hover {
    background-color: #F5F5F5;
}

Answer 1

您好，感谢小提琴，

这里的问题是你的内心高度与外部的高度相同。列表项Point2（65px高度）包含两个高度为65px（总共130px）的li，导致重叠。

修复方法是确保最外面的列表项的高度大于其所有子列表的总和。如果你想为父元素定义一个高度，你可以将它设置为像素/ em值，或者如果你想让它缩小到它的总和大小，你可以删除它的高度。＃39;孩子的高度。

这是一个小例子，父母李的身高没有高度：http://jsfiddle.net/HdZ7S/5/

li {  
    position: relative;
    margin: 0 0 5px 0;
    padding: 0;
    background-color: #f9f9f9;
    border: 1px solid #DED8D8;
    border-radius: 4px;
    clear: both;
}
ul.navpoint-sort2 > li {  
    height: 65px;
}

这里的父母李设置为200px身高：http://jsfiddle.net/9Up2V/3/

li {  
    position: relative;
    margin: 0 0 5px 0;
    padding: 0;
    height:200px;
    background-color: #f9f9f9;
    border: 1px solid #DED8D8;
    border-radius: 4px;
    clear: both;
}
ul.navpoint-sort2 > li {  
    height: 65px;
}

Twitter Bootstrap重叠嵌套的li元素

1 个答案: