修复A标签高度/宽度？

所以我有一些简单的代码在这里：修复A标签高度/宽度？

<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是否被破坏？谢谢。

来源

2013-04-25 Jeremy Maree

尝试设置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-25 05:00:27 bool32

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

http://jsfiddle.net/kHkyh/

来源

2013-04-25 05:00:32

DERP非常感谢你，我无法相信我忘记了显示属性！哈哈：D – 2013-04-25 05:02:41

修复A标签高度/宽度？

回答

相关问题