0

li タグを Information、Work、Contact の順に右にフロートさせようとしていますが、フロートすると、このリンクに表示される順序に変更されます

UL に幅を与えてから UL を右にフロートさせ、次に LI を左にフロートさせることでこれを修正できますが、応答するには、UL タグを Nav div (その親) の全幅にする必要があります。

HTML:

    <header>
        <a href="index.html"><img src="images/logo-medium.png" alt="Madaxe Designs Web      Development &amp; IT Service" class="logo"></a>
        <nav>
            <ul>
                <li><a class="info flex" title="Information"></a></li>
                <li><a class="work flex" title="Work" href="portfolio.html"></a></li>                       
                <li><a class="contact flex" title="Contact"></a></li>               
            </ul>
        </nav>
    </header>

CSS:

nav { 
    width: 57.9%; 
    height: 100%; 
    overflow: hidden;
}
header nav ul{ 
    width: 100%; 
    height: 100%; 
    float: right; 
}               
header nav li{ 
    width: 22.3%; 
    height: 112px; 
    float: right;    
    padding-left: 5px;
}
header nav li a { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    display: block; 
}
4

1 に答える 1

2

どうぞ

header nav ul {
    width: 100%;
    height: 100%;
    text-align: right;
}
header nav li {
    width: 22.3%;
    height: 112px;
    padding-left: 5px;
    display: inline-block;
    *display: inline; /* only for ie7 support */
    zoom: 1;          /* only for ie7 support */
}

簡単な説明:
私がしたことは、すべての浮動要素を削除することです。あなたの場合、それは不要であり、インラインブロックの方が優れている ためです。

次に、コンテンツ全体を右に揃えますtext-align:right;

スター ハックについて:
これは IE7 をサポートするために必要な悪ですdisplay:inline-block。 

display: inline;
zoom: 1;

しかし、追加すると、display:inline彼はそれをサポートするブラウザーの をオーバーライドします。そのため、スター ハックdisplay: inline-blockと呼ばれるものを使用してIE7 のみを対象としています。

于 2013-05-22T13:31:44.653 に答える