css - Twitter Bootstrap 重叠嵌套的 li 元素

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

你好，谢谢你的 fiddle ，

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

解决方法是确保最外层的列表项的高度大于其所有子 li 的总和。如果您想要父元素的定义高度，您可以将其设置为像素/em 值，或者如果您希望它缩小到其子元素高度总和的大小，您可以删除父 li 的高度。

这是一个父 li 没有高度的 fiddle 示例: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;
}

这是父级 li 设置为 200 像素高度的一个: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;
}