0

私は毎日CSSメニューを作成していますが、これまでこの問題に遭遇したことはなく、本当に困惑しています。：S

思いつく限りのことを試してみましたが、運が悪かったです。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時間以上費やしたので、あなたがこれを解決するのを手伝ってくれることを願っていますか？！？

4

1 に答える 1

1

ul と li には、CSS で明示的に設定されていない限り、ブラウザーで定義されているように、パディングとマージンの事前設定値があります。CSS の最初の行の上に以下を追加し、それに応じて残りのクラスをスタイルしてみてください。

ul, li {margin:0; padding:0;}
于 2012-04-15T23:50:43.983 に答える