2

スーパーフィッシュのドロップダウンメニューとしてスタイリングしたいメニューのあるワードプレスのブログがあり、このチュートリアルに従いました：http: //kav.in/wordpress-superfish-dropdown-menu

これまでのところ、メニューは見栄えがしますが、左揃えではなく中央に配置する必要があります。これが私のコードです：

#navwrap {
    float:              left;
    width:              100%;
    background:         url(images/bg.png) repeat transparent;
    text-transform:     uppercase;   
    font-size:          12px;
    height:             40px;
}
.sf-menu {
    float:              left;
    width:              100%;
    text-align:center;
}
.sf-menu li {
    background:         transparent;
}
.sf-menu a {
    padding:            0px 15px;
    text-decoration:    none;
    line-height:        40px;
}
.sf-menu ul li a {
    padding:            0px 15px;
    text-decoration:    none;
}
.sf-menu li li {
    background:         #611718;
    text-align: left;
}

私のメニューの項目はもちろん可変幅です。

私はすべてのsfクラスのないhtmlを持っていませんが、それは多かれ少なかれこのような単純なリストです：

 <div id="navwrap">

    <ul class="sf-menu">

    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a>
        <ul>
            <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        </ul>
    </li>
   </ul>
 </div>

編集：中央に配置する方法を見つけましたが、IE7では機能しません。

OK、私はグーグルで検索して見つけたアプローチを試しました、そして私がIE7をチェックするまでそれはうまくいったようでした、インラインブロックがメニューを完全に壊しているように見えます：

#navwrap .sf-menu {
   text-align: center;
}
#navwrap .sf-menu li {
   display: inline-block; 
   float: none;
}
#navwrap .sf-menu li a {
   display: inline-block;
}

これは私が取り組んでいるページです：http：//hermandaddelcalvario.org/wordpress/IE7のトップメニューが壊れているのを確認できます。

4

2 に答える 2

2

IE7は、元々ブロックレベルの要素である要素のインラインブロックを好みません。しかし、 sに
マージンを使用していないので、代わりに使用してみませんか？何の違いもないと思います。lidisplay: inline;

インラインを使用するとメニューが消えるようです。
を削除するfloat: left;と、それが修正されるようです。

（とにかく、なぜメニューが浮いているのですか？違いはないようです。）

于 2011-09-20T12:24:15.630 に答える
0

あなたはこのようなことを試すことができます：

.wrapper{
    position: relative;
    left:     50%;
    width:    100%;

}

#navwrap {
    float:              left;
    width:              100%;
    background:         url(images/bg.png) repeat transparent;
    text-transform:     uppercase;   
    font-size:          12px;
    height:             40px;
    position:           relative;
        left:           -25%;
}

そして、.wrapper内に#navwrapを入れます。リストは真に中央に配置されるわけではありませんが、実際には、できるだけ近くにあります。

于 2011-09-20T09:07:50.107 に答える