2012-04-15 9 views
0

私は日中にCSSメニューを作成しています。 :Scssメニューのいくつかのリンクが新しい行に移動します

私は運がないと思うすべてを試しました。 Chromeではうまく動作しますが、Firefoxでは最後のリンクが新しい行に表示され、IEでは最後の2つのリンクが新しい行にリンクします。

パディングを削除すると、すべてのリンクが同じ行にとどまります。

私がここで何を意味するかを見てみましょう... http://dlclients.com/estates/ここでは、問題の原因となっているCSSとHTMLの概要を示します。

nav{ 
    background: url(images/background_nav.png) repeat-x; 
    height: 30px; 
    position: absolute; 
    left: 0; 
    width: 100%; 
    margin-top: 20px; 
} 

#nav-inner{width: 1000px; height: 30px;} 

#nav-inner ul{list-style: none; margin: 0; padding: 0; width: 1070px;} 
#nav-inner ul li{ 
    display: inline; 
    overflow: auto; 
} 
#nav-inner ul li a{ 
    display: block; 
    color: white; 
    text-decoration: none; 
    font-size: 12px; 
    float: left; 
    height: 30px; 
    line-height: 30px; 
    border-right: 1px solid #6D6E71; 
    padding: 0 14px; 
} 
#nav-inner ul li a.last{border: none;} 
#nav-inner ul li a:hover{ 
    border-bottom: 4px solid white; 
} 

HTML:

<nav> 
       <div id="nav-inner"> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Buy</a></li> 
         <li><a href="#">Sell</a></li> 
         <li><a href="#">Rent</a></li> 
         <li><a href="#">Landlords</a></li> 
         <li><a href="#">Property Maintenance</a></li> 
         <li><a href="#">Commercial/Land</a></li> 
         <li><a href="#">Short Term Let/Olympics</a></li> 
         <li><a href="#">About Us</a></li> 
         <li><a href="#" class="last">Contact Us</a></li> 
        </ul> 
       </div> 
      </nav> 

あなたは、私がこれを理解しようとして2時間以上を費やしてきたので、これを解決するのに役立つことを願って?!?

答えて

1

ulおよびliには、CSSで明示的に設定されていない限り、ブラウザで定義されているように、埋め込みと余白の値があらかじめ設定されています。 CSSの最初の行の上に次の行を追加し、それに応じて残りのクラスのスタイルを設定してください:

ul, li {margin:0; padding:0;} 
+0

haha​​!私は何をしたのか分かりました...私はリストをスタイリングしていたときに 'li {margin:10px}'を設定しました...メニューの余白を取り除くのを忘れました...ばかげて...ありがとうございました: ) –

関連する問題