2013-04-25 2 views
0

그래서 내가 여기에 몇 가지 간단한 코드를 가지고 :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이 손상 되었습니까? 감사.

답변

0

li의 앵커 태그에 높이 및/또는 너비를 설정해보십시오. 즉, anchor 태그를 사용하여 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> 
2

display: inline 요소 height을 존중하지 않는 : 다음은 내가 무슨 말 약입니다. 높이를 변경하려면 display: inline-block (또는 아마도 block)으로 변경하거나 line-height을 사용하십시오.

http://jsfiddle.net/kHkyh/

+0

DERP 덕분에 당신은 너무 많은 내가 캔트 I 디스플레이 속성에 대해 잊어 버린 거라고 믿습니다! 하하 : D –