インラインリストのスタイリング

Question

<ul>コンテナ内にテキストを配置する方法が不明です。<li>がオーバーフローしています。私は間違って何をしていますか？ http://jsfiddle.net/ewAtr/

Answer 1

に見られるように、親のdivに隠さ：

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

余白と罫線の幅を考慮していません。 prodigitalsonが言ったように、div#listedの高さはli年代のマージンとボーダーの幅を含めなければなりませんthis updated jsFiddle

Answer 5

迅速かつ汚い方法がオーバーフローすることです。

私はこの編集したフィドルのように、divのためheight:autoを使用してulためclearfixを使用して希望：http://jsfiddle.net/rJkL8/