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;
}

这段代码应该强制我的 a 标签水平对齐并给它们一个明确的高度/宽度。它们完美对齐，但无论我做什么，它们的高度和宽度都不会改变。以前从来没有遇到过这个问题，我的 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 回答