Укладка встроенного списка

Question

Я не уверен, как разместить текст в контейнере <ul> без переполнения <li>. Что я делаю не так? http://jsfiddle.net/ewAtr/

Answer 1

Как сказал prodigitalson, высота div#listed должна включать в марже и пограничной ширины li лет.

Я предпочел бы, используя height:auto для DIV и использование clearfix для ul, как в этой редактируемой скрипке: http://jsfiddle.net/rJkL8/

Answer 2

Попробуйте использовать последний ребенок для таргетинга последнего li.

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