設計嵌入式列表

Question

我不確定如何放置<ul>容器中的文本，而不會溢出<li>。我究竟做錯了什麼？ http://jsfiddle.net/ewAtr/

Answer 1

看到作爲prodigitalson所說，div#listed高度應該具有包容性的li的保證金和邊緣寬度。

我寧願使用height:auto的股利和使用clearfix爲ul，就像這個編輯小提琴：http://jsfiddle.net/rJkL8/

Answer 2

試着用最後一個孩子來瞄準最後一個孩子。

Answer 3

#listed { 
    height: 50px; 
    width: 330px; 

    } 

    #listed ul { 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    list-style-type:none; 

    } 

    li.item { 

    float: left; 
    margin-top:10px; 
    } 

    #listed ul li a { 

    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size: 15px; 
    color: blue; 
    text-align: center; 
    text-decoration: none; 
    padding:15px 10px; 
    border-left: 1px solid #ddd; 
    border-bottom:1px solid #ddd; 
    } 

    #listed ul li a:hover{ 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size: 15px; 
    color: white; 
    background-color: blue; 
    text-align: center; 
    text-decoration: none; 
    } ​ 

Answer 4

您沒有考慮邊距和邊框寬度。

Answer 5

的快速和骯髒的方法是溢出：隱藏在父DIV爲this updated jsFiddle