修復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標籤高度/寬度？

回答

相關問題