2
링크의 정렬 :CSS/HTML 수직 다음 코드를 감안할 때 가로 방향 탐색 메뉴
HTML:
<div id="nav_bar">
<ul>
<li ><a href="#" class="current">HOME</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">TO DRINK</a></li>
<li><a href="#">TO EAT</a></li>
<li><a href="#">LOCATION</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#"><img class="flag"src="images/italy_flag.png" alt="" /></a></li>
<li><a href="#"><img class="flag"src="images/uk_flag.png" alt="" /></a></li>
<li><a href="#"><img class="flag"src="images/spain_flag.png" alt="" /></a></li>
</ul>
</div>
CSS:
#nav_bar{
width:745px;
height:20px;
background-image:url(../images/bkg_nav_bar_02.png);
margin:5px auto;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
}
#nav_bar ul{
list-style:none;
text-align:center;
}
#nav_bar a{
text-decoration:none;
font-size:.8em;
margin:0 10px;
font-weight:bold;
color:#FFFF33;
}
#nav_bar li{
display:inline;
margin-bottom:3px;
}
.flag{
position:relative;
float:right;
border:none;
margin-top:4px;
margin-right:10px;
}
텍스트 링크가 사파리와 크롬으로 정렬 정확하게 수직 그래서 이미지 링크가 있지만 파이어 폭스에서 (3.5) 텍스트 링크는 약간 위치가 어긋나 있습니다. 왜?
이미지가없는 경우에도 같은 문제가 발생합니다. 이미지가없는 경우에도 – Mirko
입니다. 요소 사이에 크기 차이가 있습니다. li 요소의 높이를 가장 큰 li 요소의 높이보다 두 배 이상 높이도록합니다. –