0

だから私はここにいくつかの簡単なコードを持っています:

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
    </ul>
</div>

CSS-

ul
{
list-style-type:none;
width:700px;
height:44px;
padding:0;
}

li
{
float:left;
margin:0;
padding:0;
width:80px;
height:auto;
}

a
{
height:40px;
text-decoration:none;
border:2px solid black;
background:blue;
}

-#nav
{
width:786px;
height:66px;
border:2px solid black;
background:#C4BD97;
margin:5px;
}

このコードは、タグを水平方向に整列させ、明確な高さ/幅を与える必要があります。それらは完全に整列しますが、私が何をしても高さと幅は変わりません. これまでこの問題に遭遇したことはありませんが、私の HTML は壊れていますか? ありがとう。

4

2 に答える 2

2

display: inline要素は尊重しませんheight。それらをdisplay: inline-block(またはおそらくblock) に変更するか、 を使用line-heightして高さを変更します。

http://jsfiddle.net/kHkyh/

于 2013-04-25T05:00:32.943 に答える
0

li のアンカー タグに高さおよび/または幅を設定してみてください。つまり、アンカー タグを使用して li を押し出します。アンカーの領域全体がクリック可能であることを確認するために、パディングを使用してこれを適切に均一な方法で行うことができます。また、このアプローチは、私が信じている ie6 にまでさかのぼります (ie5 については不明で、テストしていません)。以下は、私が話していることの大まかなことです：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            body, #menu, #menu li
            {
                position: relative; 
                display: block;
                padding:0px;
                margin: 0px;
            }

            #menu
            {
                list-style-type:none;
                width:100%;
            }

            #menu a
            {
                position:relative;
                display:block;
                float:left;
                width:25%;
                padding:10px 0px 10px 0px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li><a href="#">One item</a></li>
            <li><a href="#">Another item</a></li>
            <li><a href="#">hola</a></li>
            <li><a href="#">Hi</a></li>
        </ul>
    </body>
</html>
于 2013-04-25T05:00:27.043 に答える