Twitter Bootstrap重疊嵌套李元素

Question

我想要顯示一個和元素內的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高度）包含兩個li，每個高度爲65px（總計130px），導致重疊。

解決的辦法是確保最外層列表項的高度大於其所有子li的總和。如果您想爲父元素定義高度，您可以將其設置爲像素/ em值，或者如果您希望縮小到父子元素的高度，可以將其縮小爲子元素高度總和的大小。

下面是與父李的沒有高度小提琴例如：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; 
} 

而且這裏有一個與父李的設置爲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; 
}