-1

以下のリンクにメニューがあります。

http://fiddle.jshell.net/V88c6/8/show/

ここに完全なjsfiddleがあります

http://jsfiddle.net/V88c6/8/

ここにHTMLがあります

<div id="head_1">
    <div class="inner">

        <div class="column_0">
            LOGO
        </div>

        <div class="column_1">
            <a href="#" class="menu_link">LINK 1</a>
            <a href="#" class="menu_link">LINK 2</a>
            <a href="#" class="menu_link">LINK 3</a>
            <a href="#" class="menu_link">LINK 4</a>
        </div>

        <div class="column_2">
            <span>USER NAME</span> <a href="#" class="menu_link">LOGOUT</a>
        </div>

        <div class="clearfix"></div>

    </div>
</div>

何らかの理由で、ホバー時の LOGOUT リンクの上部の境界線が、残りのリンクよりも 1 ピクセル高いように見えます。これは、いくつかのcss リセット スクリプトを追加したときに発生しました。

これは、LOGOUTリンクが正常に機能するcssリセットのない同じページのリンクです。

http://fiddle.jshell.net/V88c6/9/show/

私は css リセット スクリプトを使用して、ほとんどの一般的なブラウザーでページが同じように見えるようにするのが好きです。

css リセット スクリプトが LOGOUT リンクのみに干渉する理由を知っている人はいますか?

IE7、IE8、最新の Google Chrome、最新の Firefox、最新の Opera でテスト済み。

4

3 に答える 3

1

あなたはそれを悪い方法でスタイルしようとしています。このようにスタイリングしてみてください - whit li ul :

<div class="column_1">

 <ul class="menu_link">
 <li><a href="#" >LINK 1</a></li>
 <li><a href="#" >LINK 2</a></li>
 <li><a href="#" >LINK 3</a></li>
 <li><a href="#" >LINK 4</a></li>
 <ul>

</div>

<div class="column_2">

 <ul class="menu_link">
 <li>username</li>
 <li><a href="#" >LINK 4</a></li>
 <ul>

</div>

これらはセレクターです：

.menu_link li{}
.menu_link li a{}
于 2013-05-01T11:47:39.967 に答える
0

問題は、プロパティの計算値に関係していdisplayます。

「LINK 1」などの中央の列には が表示.menu-linkされfloat: left、<a>要素がインラインではなくブロックになります。

「ログアウト」リンクは.menu-linkフロートなしで表示されるため、<a>要素はインラインです。

インライン要素は、インライン ボックスの高さにブロック要素とは異なる影響を与えます。

ブラウザのデフォルトのスタイル シートには、この効果を隠していたスタイル プロパティがあり、リセットされた CSS スタイル シートを使用すると、それが表示されます。

修正するには、右側の 2 つの要素 (ユーザー名とログアウト) をフローティング要素としてレイアウトするか、余白または行の高さを 1 ～ 2 px 微調整します (試行錯誤、うめき声​​が伴います)。

次のようにCSS
を調整して、次のことを行うことで、一貫したレイアウトを得ることができました。

#head_1 .inner .column_2 {
    display:block;
    float:right;
    /* padding:34px 0px 10px 15px; Remove this... */    
}

#head_1 .inner .column_2 .menu_link{
    border-top:17px solid transparent;
    padding:17px 15px 10px 15px;    
    float: left; /* add this.. */
}

/* Float your span like you floated the link... */
#head_1 .inner .column_2 span {
    border-top:17px solid transparent;
    padding:17px 15px 10px 15px;    
    float: left;
}

フィドル: http://jsfiddle.net/audetwebdesign/Myhcy/

重要なのは、2 つのメニューをレイアウトする際に一貫したコーディング スタイルを維持することです。

于 2013-05-01T12:01:25.483 に答える