はCSSでこれを行うにはどのよう

Question

私のマークアップは次のようになります。

<div class="header-section"> 
    <a href="#" class="logo"><img src="logo.png" /></a> 
    <div class="navigation"> 
     <ul> 
      <li><a href=# class="active">Home</a></li> 
      <li><a href=#>Bakery</a></li> 
      <li><a href=#>Fishery</a></li> 
      <li><a href=#>Casino</a></li> 
      <li><a href=#>Disney Land</a></li> 
     </ul> 
    </div> 
    <div style="clear:both" /> 
</div> 

と重要CSSです：だからリンクは右側に水平線でフォーマットされている

.header-section { 
    margin: 30px 0; 
} 

.header-section .logo { 
    float: left; 
} 
.header-section .logo img{ 
    border: 0; 
} 
.header-section .navigation { 
    float: right; 
    margin-top: 23px; 
} 
.header-section .navigation ul { 
    list-style: none; 
} 
.header-section .navigation ul li{ 
    font-size: 18px; 
    font-family: Tahoma, Arial, Verdana; 
    float: left; 
    margin: 0 20px; 
} 

ロゴ。 最初は画面の不動産が1行に収まらないときにラップさせるというアイデアがありましたが、実際に何が起こったのはラップする前にロゴの下に落ちたことでした。皮肉なことに、私が気づいたように私が見たところまで、私はこれに満足していました。

私の質問は、 - ロゴイメージの下にスナップする前にリンクをラップするにはどうすればよいですか？ブロック要素として

Answer 1

メイクタグ：

と幅&高さを追加します。..

.header-section a { 
display:block; 
width:100px; 
height:100px; 
} 

Answer 2

navigation div endとの両方の部分の修正幅の後<a href="#" class="logo"><img src="logo.png" /></a>を入れてみてください...それは動作するはずです