1

div メニュー内で ul を中央に配置しようとしています。他のメニューを見て、思いつく限りの組み合わせを試しましたが、まだうまくいきません。

コードは次のとおりです。

#cssmenu ul{
    margin:0 auto;
    padding:0;
    list-style-type:none;
    width:100%;
    position:relative;
    display:block;
    height:38px;
    font-size:14px;
    background:#f9f8f8;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    font-family:Arial,Helvetica,sans-serif;
}
#cssmenu li{
    display:block;
    float:left;
    margin:0;
    pading:0;
    }
#cssmenu li a{
    display:block;
    float:left;
    color:#333333;
    text-decoration:none;
    padding:12px 20px 0 20px;
    height:24px;
    height:38px;
    }
#cssmenu li a:hover{
    text-decoration:underline;  
    }


    <div id="cssmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">The Program</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Members Login</a></li>
</ul>
</div>

どんな助けでも大歓迎です。

ありがとう！マイク

4

1 に答える 1

2

最初width: 100%からを削除する必要があります。ulコンテナと同じサイズのものを実際に中央に配置することはできません:)。それを削除した後、リストを作成してinline-block、その子の幅を占めるようにし、次にtext-aligndivで単純なものを使用することができます。

#cssmenu {
    text-align: center;
}

#cssmenu ul{
    display: inline-block;
}

もちろん、リストが全幅ではなくなったため、スタイルの一部をリストからdivに移動する必要があります。

jsFiddleデモ

于 2013-01-25T19:44:00.900 に答える