CSS水平ナビゲーションリスト垂直に画像リンクとテキストを整列する

Question

私はCSSでかなり新しいですが、自分のお金を節約するために私のママの中小企業のウェブサイトを学んでいますが、私はナビゲーションバーに少しCSSの問題があります。 基本的にここに行く場合：http://area25dallas.com/sとnav barを見て、ilリストに問題があります。イメージを縦に並べる（現在のトップに合わせるのではなく）何らかの理由で、画像がお互いに横たわっているのではなく、お互いの上に並んでいます（私はマージンが広がりすぎているので、テキストリンクのような別のリストには入れません）。

私はCSSを使いこなしていますが、これを知っていますが、解決策が見つかっていません。これには迅速な修正はありますか？

ありがとうございます！

EDIT：あなたは、クロムを使用している場合、私はちょうど要素を検査感じるのにここ は、HTMLと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

#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; 

}