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;
}

我试着把宽度：自动；在 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 回答