首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >尝试居中对齐UL,但宽度默认为100%

尝试居中对齐UL,但宽度默认为100%
EN

Stack Overflow用户
提问于 2012-06-05 05:58:28
回答 1查看 2.8K关注 0票数 1

http://anaya.sonikastudios.com/

HTML:

代码语言:javascript
运行
复制
<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:

代码语言:javascript
运行
复制
#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元素的数量进行调整。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-06-05 06:09:02

<li>元素中删除float: left<ul>将居中。

如果出于某种原因,您必须让<li>元素浮动,请在水平居中的浮动列表周围查找信息,例如:http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10888970

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档