3

私は単純な水平メニューを作成し、すべての LI 内で左右のパディングを等しくしましたが、つまりバージョンでは、最後の li の後に余分なスペースが残っているか、次の行に来ています。

ブラウザ間の互換性を確保するために 3 時間を費やしましたが、失敗に終わりました。スペースを調整するために最後の LI に追加のパディングを配置すると、Firefox では問題なく動作しますが、IE では不要なスペースが表示されます。ハックを使わずにクロスブラウザー対応にしたい。

ここに画像の説明を入力

以下はコードです：

<section class="topContent">
    <nav>
        <ul>
            <li><a href="javascript:;">home</a>
            </li>
            <li><a href="javascript:;">earthmoving</a>
            </li>
            <li><a href="javascript:;">attachments</a>
            </li>
            <li><a href="javascript:;">power systems</a>
            </li>
            <li><a href="javascript:;">truck tailer</a>
            </li>
            <li><a href="javascript:;">ag equipment</a>
            </li>
        </ul>
    </nav>
    <!--/nav-->
</section>

.topContent{ width:940px; margin:0 auto;}
.topContent nav{ background:#ffce12; height:42px;}
.topContent nav ul{ padding:0; margin:0;}
.topContent nav li{ float:left; list-style:none;}
.topContent nav li a{ font:14px/42px Arial, Helvetica, sans-serif; color:#000; padding:0 40px; text-transform:capitalize; display:block;}
.topContent nav li a:hover, .topContent nav li a.active{ background:#464646 url(../images/hover-arrow.jpg) no-repeat center 0; display:block; color:#fff;}
4

2 に答える 2

0

「デザイン会社」のCSSは、アイテムの配置や間隔をまったく調整しません。1つのブラウザーで機能するように、パディング値を調整しただけです。

これを解決する1つの方法は、ナビゲーションアイテムを正当化することです。または、動的コンテンツに関心がない場合（つまり、ナビゲーションアイテムのタイトルが長期間変更されない場合）、要素の幅を明示的に設定し、テキストを中央に配置することができます。

于 2012-11-04T22:55:17.960 に答える
0

問題はメニューの幅に基づいています。テキストはブラウザやオペレーティングシステムごとにわずかに異なるため、これを完璧に実現することはできないと思います。メニューが動的でない場合は、幅/パディングを個別に調整してみてください。または、メニューの幅の幅をリンクの数で割ることもできます。一部のアイテムが長すぎると、少し奇妙に見える場合があります。これを行う場合は、テキストを中央に揃えてください。

nav a {
    padding: 0; /*just need to remove the padding*/
    width: 156.6px; /*940 / 7 (the amount of links)*/
    text-align:center; 
}
于 2012-11-04T23:13:26.113 に答える