1

http://anaya.sonikastudios.com/

HTML：

<div id="menubar" class="grid_12 alpha omega">
    <ul id="menu">
        <li><a href="#" title="Diamond Engagement Ring Sets">Engagement Sets</a></li>
        <li><a href="#" title="Diamond Solitaires">Solitaires</a></li>
        <li><a href="#" title="Diamond Three Stone Rings">Three Stone Rings</a></li>
        <li><a href="#" title="Diamond Anniversary Rings">Anniversary Rings</a></li>
        <li><a href="#" title="Diamond Gentleman's Rings">Gent's Rings</a></li>
        <li><a href="#" title="Diamond Earrings">Earrings</a></li>
        <li><a href="#" title="Diamond Pendants">Pendants</a></li>
        <li><a href="#" title="Diamond Bracelets">Bracelets</a></li>
    </ul>
</div>

とてもシンプルで、本当に。

次に、CSSがあります。

#menubar {
    height: 22px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background-image: url('/images/menubar_bg.png');
    background-repeat: repeat-y;
    text-align: center;
}

#menu {
    padding:0px;
    height: 20px;
    list-style:none;
    white-space: nowrap;
    position: relative;
    margin: 1px auto;
}

#menu li {
    display:inline;
    padding: 0px 11px 0px 10px;
    margin: 5px 0px;
    list-style:none;
    position: relative !important;
    background-image: url('/images/menu_item_tick.png');
    background-position: right center;
    background-repeat: no-repeat;
    text-align: center;
    float: left;
}

width：auto;を入れてみました。UL要素（#menu）にありますが、使用しません... UL要素を中央に配置し、幅の100％を自動的に使用しないようにします。コンテンツと、その中のLI要素の数に合わせて調整する必要があります。

4

1 に答える 1

4

要素float: leftからを削除すると、意志が中心になります。<li><ul>

何らかの理由で<li>要素をフロートさせる必要がある場合は、たとえばここで説明されているように、水平方向に中央に配置されたフロートリストに関する情報を探してください：http：//matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-フルクロスブラウザ-サポート。

于 2012-06-04T22:09:02.050 に答える