CSS 수평 탐색 목록이 텍스트를 이미지 링크와 수직으로 맞 춥니 다

Question

저는 CSS에서 꽤 새로운데, 돈을 아끼기 위해 엄마의 중소 기업 웹 사이트를 배우면서 배우 내 탐색 막대에 약간의 CSS 문제가 있습니다. 기본적으로 여기에있는 경우 : http://area25dallas.com/s과 nav bar를 보면, il 목록을 사용하여 텍스트가 수직으로 정렬되도록하는 데 문제가 있습니다 (현재 행하고있는 상단과 정렬하는 대신). 어떤 이유로 이미지가 서로 옆에 앉아있는 대신 서로 겹쳐서 표시됩니다 (여백이 너무 넓어서 텍스트 링크와 같은 별도의 목록에 표시하지 않습니다).

나는 CSS로 놀아 왔고 이것으로 도망칩니다.하지만 여전히 해결책을 찾지 못했습니다. 이 문제가 빨리 해결 되었습니까?

감사합니다. 편집

: 여기 는 크롬을 사용하는 경우 비록 난 그냥 요소가

<div id = "header"> 
    <div class = "container"> 
    <a href = "index.htm" id = "logo"></a> 
<ul id = "main-menu"> 
<li class = "active"><a href = "">home</a></li> 
<li><a href = "">about</a></li> 
<li><a href = "">gallery</a></li> 
<li><a href = "">press</a></li> 
<li><a href = "">contact</a></li> 
<li><a href = ""><img src="images/twitter_newbird_boxed_ white.png" /></a> 
<a href = ""><img src="images/Pinterest_Favicon white.png" /></a></li> 

</ul> 

    </div> 
</div> 

에 이동하고 CSS 무엇을 볼 수있는 가장 쉬운 방법입니다 검사을 느끼는 HTML 및 CSS 일시적입니다

#main-menu 
{ 
float: right; 
position:relative; 
top:122px; 
right:150px; 
} 
#main-menu li 
{ 
float: left; 
margin: 30px 12px 15px 12px; 
padding:0; 
height:23px; 
list-style:none; 
line-height:20px; 
} 

#main-menu li:hover, #main-menu li.active { background-position: 0 -23px;} 
#main-menu li:hover a, #main-menu li.active a{ 
background-position: 100% -30px; 
} 
#main-menu li a 
{ 
display:block; 
padding:0px 15px 5px 10px; 
font-size:17px; 
color:#fff; 
text-decoration:none; 
} 

Answer 1

이미지는 블록 레벨 요소로 지정된 < > 태그 내부에 있기 때문에 여러 줄로 나뉩니다. 스타일을 다음과 같이 변경하십시오.

#main-menu { 
    float: right; 
    position: relative; 
    right: 75px; /* Changed */ 
    top: 122px; 
} 

#main-menu li a { 
    color: #fff; 
    display: inline-block; /* Changed */ 
    font-size: 17px; 
    padding: 0 15px 5px 10px; 
    text-decoration: none; 
} 

/* New */ 
#main-menu li a img { 
    position: relative; 
    top: -10px; 
} 

하단의 새 규칙은 이미지를 약간 위로 이동시킵니다. 당신은 당신의 CSS로 놀고 많은 다른 방법으로 같은 결과를 얻을 수 있습니다 - 나는 기존의 작품에 많은 변화를 포함하지 않은 방법으로 갔다.

Answer 2

팁 주셔서 감사합니다, 얘들 아, 이건 내 CSS 탐색에서 이미지로 나를 도왔습니다.

나는 또한 당신의 간격 문제를 완화하기 위해 일부 추가 코드를 권 해드립니다 ...

#main-menu li a img { 
position:absolute; 
background:inherit; 
    top: 0px; 
margin-bottom:auto; 
max-height: 33px; 

}