6

これは古いトピックですが、本来よりも難しいことが証明されていることを誓います。

問題を示すためにjsfiddleを作成しました。http://jsfiddle.net/motocomdigital/VfDfw/1/

クラックしたかと思ったらIE8互換モードで失敗。


問題

シマンティックな順序付けられていないリストにナビゲーションメニューがあります。を含む div ラッパーには、ウェブサイトのメイン幅である固定幅があります。

順序付けられていないリストは、ラッパーの中央に配置する必要があります。しかし、ナビゲーションのどのブロック要素にも幅が設定されていません。

http://jsfiddle.net/motocomdigital/VfDfw/1/

各要素が見えるように、各要素に異なる背景色を付けました。

左の位置としてdiv.navの半分のラッパー幅を持ち、次に.nav ulで -50% のマージン左を持つ修正購入を見つけたと思いましたが、IE 8 互換モードでは失敗するようです。以下のフィドルを参照してください...

http://jsfiddle.net/motocomdigital/VfDfw/2/

誰でも解決策またはより効率的な CSS メソッドを提案できますか? 私の麺を焼いています。

ありがとう

アップデート

フィドルの例で各 div を使用している理由で質問を更新する必要があると思いました。

私の新しいフィドルを見てください。http://jsfiddle.net/motocomdigital/VfDfw/3/

各要素に 10px の上部位置を追加したので、これほど多くの div を使用した理由がわかります。しかし、唯一の問題は、このソリューションが IE 7 に適していないことです。したがって、ブロック要素をセンタリングする別のソリューションが必要です。float: center CSS ルールがあればいいのに!

ここに画像の説明を入力

  1. 紺色のdivは、ナビゲーションの無限の背景画像の地平線 100% 幅の div です。
  2. 赤いdivは、私の Web サイトの最大幅であるラッパーです。フィドル幅: 420px。
  3. 緑色のdivは動的ナビゲーションのフローティング幅で、左に配置されています: 210px (上記の幅の 50%)
  4. 黄色のulは動的ナビゲーション要素のフローティング幅で、負のマージンは 50% です。
  5. 青いliは、仕切り付きの私のアンカー ボタン コンテナーです。

これが理にかなっていることを願っています。しかし、このソリューションはほとんど機能しましたが、IE7 で機能しないのは残念です

4

3 に答える 3

0

text-align center を使用して display block と inline-block を使用すると役立つ場合があります。非常に古いブラウザで動作していました。ラッパー、nav、ul でブロックを inline-block に変更して、それらを全幅または「縮小」して中央に配置します。(古い IE ではフィドルをチェックできませんが、動作するはずです)

div 内のテキストを中央に配置し、テキストが実際にはテキストではなくインライン ブロックである場合、それらは「単語」のように動作し、固定幅を必要とせずにコンテンツを要素の中央に配置されたリストにします。

body {
    font-family: Helvetica, Arial, Geneva, sans-serif;
}

#horizon {
    height: 49px;
    width: 100%;
    overflow: visable;
    position: relative;
    background: url(images/nav-bg.jpg) no-repeat center top #041e75;
    top: 100px;
}

#wrapper {
    max-width: 420px;
    margin:  0 auto;
    height: 49px;
    overflow: visible;
    background: red;
    padding:10px;
    text-align:center;
}

.nav {
    display:block;
    height: 49px;
    background: green;
    padding:5px;
    text-align:center;
}

.nav a {
    color: #ffffff;
}

.nav ul {
    background: yellow;
    padding:5px;
    display:block;
    text-align:center;
}

.nav ul li {
    display: inline-block;
    background: blue;
    overflow: visible;
}

.nav ul li a {
    display: block;
    height: 49px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
    padding-right: 10px;
    padding-left: 10px;
}

.nav ul li a:hover {
    text-decoration: none;
    background-color: rgb(6, 29, 93 );
    background-color: rgba(13, 43, 119, 0.95);
}
<div id="horizon">
    
    <div id="wrapper">
    
        <div class="nav">                
        
            <ul>
        
                <li><a href="#" title="home">Home</a></li>
                <li><a href="#" title="about">About</a></li>
                <li><a href="#" title="menu">Menu</a></li>
                <li><a href="#" title="map">Map</a></li>
                <li><a href="#" title="contact">Contact</a></li>
        
            </ul>
    
        </div>
        
    </div>
    
</div>

于 2018-01-10T09:38:23.597 に答える