CSS 水平对齐浮点数答案

【问题标题】：CSS Horizontal Align FloatCSS 水平对齐浮点数
【发布时间】：2013-06-08 18:08:51
【问题描述】：

我有一个简单的菜单，我想使用 css 将它放在页面的中心。这是菜单：http://jsfiddle.net/kSV4K/4/

这是代码， CSS：

ul#menu { margin:0; padding:0; list-style-type:none; }
ul#menu li { position:relative; float:left; border-bottom:4px solid #efefef; margin-right: 0px; padding-right: 0px; padding-bottom: 5px;}
ul#menu .current { border-bottom:4px solid #3d496a;}
ul#menu li:hover { border-bottom:4px solid #3d496a;}
ul#menu li a { padding:2px 2px; text-decoration:none; font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}
ul#menu li a:hover { color:#8895b8; border:none; }

HTML：

<ul id="menu">
    <li class="current"><a href="#" data-id="div1">Description</a></li>
    <li><a href="#" data-id="div2">Shipping and payment</a></li>
    <li><a href="#" data-id="div3">Returns</a></li>
    <li><a href="#" data-id="div4">Feedback</a></li>
</ul>

有什么建议吗？

【问题讨论】：

我强烈建议在你的小提琴中加入更多的上下文：应用于容器和周围元素的样式可能会影响 this 的定位。另外，请注意 ul#menu 在某种程度上是错误的选择。您的页面上应该只有 1 个 id 为“menu”的项目，因此无需使用 ul 作为前缀。

标签： css css-float center alignment text-align

【解决方案1】：

在li 元素上使用内联块而不是浮点数，然后可以在ul 块上应用text-align: center 使它们居中。

ul#menu {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align: center;
}
ul#menu li {
    display: inline-block;
    border-bottom:4px solid #efefef;
    margin-right: 15px;
    padding-right: 20px;
    padding-bottom: 5px;
}

见小提琴：http://jsfiddle.net/audetwebdesign/kSV4K/3/

【讨论】：

【解决方案2】：

您还可以为菜单添加一些宽度并应用margin: 0 auto; 使其居中这是小提琴http://jsfiddle.net/xtatanx/swT4F/ 我还建议将您的菜单包含在<nav> 标记或<div> 中。

【讨论】：