Question

所以我在这里有一些简单的代码：

<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坏了吗？感谢。

Answer 1

display: inline元素不尊重height。将它们更改为display: inline-block（或可能block）或使用line-height更改高度。

http://jsfiddle.net/kHkyh/

Answer 2

尝试在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>

修复A标签高度/宽度？

2 个答案: