设计嵌入式列表

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