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時間以上を費やしてきたので、これを解決するのに役立つことを願って?!?
haha!私は何をしたのか分かりました...私はリストをスタイリングしていたときに 'li {margin:10px}'を設定しました...メニューの余白を取り除くのを忘れました...ばかげて...ありがとうございました: ) –