Question

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元素。

Answer 1

从float: left元素中移除<li>，<ul>将会居中。

如果由于某种原因，必须浮动<li>个元素，请查找水平居中的浮动列表周围的信息，例如：http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support中所解释的。

尝试居中对齐UL，但宽度默认为100％

1 个答案: