インラインブロック画像とナビゲーションボタンをアライメントできません

Question

何らかの理由で、またはナビゲーションボタンが画像によって押し下げられています。私はイメージを浮かべて問題を解決することができますが、それは私には関心がありません。

CSS：

.wrapped { 
position: relative; 
width: 70%; 
margin: 0 auto; 
} 

.header { 
width: 70%; 
margin: 0 auto; 
} 

.headernav { 
width: 70%; 
margin: 0 auto; 
height: 120px; 
} 

.logo, .logo img { 
display: inline-block; 
margin-right: 30px; 
} 

.nav { 
padding-left: 30px; 
display: inline-block; 
height: 120px; 
line-height: 120px; 
vertical-align: middle; 
} 

.navbutton { 
padding: 5px 30px; 
display: inline-block; 
} 

#fitness, #wcontrol, #recipes, #supplementation { 
text-align: center; 
height: 36px; 
line-height: 36px; 
font-weight: bold; 
} 

HTML：

<div id="wrapperheader"> 
    <div class="headernav"> 

    <div class="logo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></div> 

    <div class="nav"> 
     <div class="navbutton"><div id="recipes">Recipes</div></div> 

     <div class="navbutton"><div id="fitness">Fitness</div></div> 

     <div class="navbutton"><div id="wcontrol">Weight Control</div></div> 

     <div class="navbutton"><div id="supplementation">Supplementation</div></div> 
    </div> 

    </div> 
</div> 

これは、または単純な解決策の起こっている理由を誰もが知っている場合、私に知らせてください。申し訳ありませんが、明らかな答えは..私は一日のオンとオフのコードを凝視している、それはクリックしていないだけです。

Answer 1

あなたは、ナビゲーションバーにロゴを移動することで、divのスープを削除するには、あなたのHTML & CSSを簡素化することができます：

それをクリックすると、返すように通常のロゴは、アンカータグでラップされるだろうユーザーをホームページに移動します。したがって、それはnav要素になります。

HTML：

<div class="nav"> 
    <div class="navlogo"><a href="http://protein.guru" class="navlogo-link"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></a></div> 
    <div class="navbutton"><span id="recipes">Recipes</span></div> 
    <div class="navbutton"><span id="fitness">Fitness</span></div> 
    <div class="navbutton"><span id="wcontrol">Weight Control</span></div> 
    <div class="navbutton"><span id="supplementation">Supplementation</span></div> 
</div> 

HTMLは、上記のスパンを使用していますが、以下に示すように、あなたはまた、<... class="navbutton" id="recipes">Recipes</...>を使用することができます。

最適化されたHTML：一般に、人々はナビゲーションバー用のUL LIタグスタックを作成します。 CSSをクリーンアップ

その後

<ul class="nav"> 
    <li class="navlogo"><a href="http://protein.guru" class="navlogo-link"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></a></li> 
    <li class="navbutton" id="recipes">Recipes</li> 
    <li class="navbutton" id="fitness">Fitness</li> 
    <li class="navbutton" id="wcontrol">Weight Control</li> 
    <li class="navbutton" id="supplementation">Supplementation</li> 
</ul> 

は、両方の.logo & .logo .imgタグに右マージン&パディングが重複適用の問題を削除します。あなたの例では、nav要素には左余白があり、これはロゴ&の最初のリンクの間に余白スペースを作成していました。

下記のCSSの例では、vertical-align:middle;というプロパティもスローされています。そのため、navリンクは画像のロゴの横に表示されます。このjsfiddleを参照してください。

CSS：

.nav { 
    height: 120px; 
    line-height: 120px; 
    margin: 0 auto; 
    vertical-align: middle; 
    width: 70%; 
    } 

    .nav li { 
    display: inline-block; 
    list-style-type: none; /* removes bullets */ 
    } 

    .nav .logo, 
    .nav .navlogo, 
    .nav .navbutton { 
    display: inline-block; 
    } 

    .nav .logo { 
    vertical-align: middle; 
    } 

    .nav .navbutton { 
    font-weight: bold; 
    height: 36px; 
    line-height: 36px; 
    padding: 5px 0 0 30px; 
    text-align: center; 
    } 

Answer 2

あなた.wrappedコンテナのwidth: 70%を維持したい場合、あなたはあなたのイメージのあなたのnavメニューやサイズのpaddingを削減する必要があります。

See this fiddle

（これは、ウィンドウのサイズが大きい上で動作します）

Otherelse、あなたは.wrappedコンテナの固定widthを置くが、まだあなたのnavメニューのpaddingや画像のwidthを検討することができますそれを適合させる。

.navbutton { 
    padding: 5px 25px; 
    display: inline-block; 
}