0

我想在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;
}
4

1 回答 1

0

你好，谢谢你的小提琴，

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

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

这是一个在父 li 上没有高度的小提琴示例：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 设置为 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;
}
于 2013-06-21T18:41:00.083 回答