html - CSS：居中没有特定宽度的固定菜单

Question

我一直在努力解决一些问题：将我的 CSS 菜单居中！我不知道该怎么做。我究竟做错了什么？

http://jsfiddle.net/yfVs2/

Answer 1

尝试这个

.menu {
    height: 80px;
    border: 1px solid rgba(255,255,255,0.3);
    position: fixed;
    top: -8px;
    left: 50%;
    margin-left: -200px; /* half of the .menu width if you don't know width delete this line */
}

如果你不知道这个元素的宽度，你可以用 javascript/jquery 动态计算它。

$(document).ready(function() {
    var wdth = $('.menu').width();
    wdth = wdth/2;
    $('.menu').css('margin-left', -wdth);
});

这是工作示例http://jsfiddle.net/yfVs2/11/

Answer 2

您使用了固定位置。所以边距自动不适用于固定位置。您可以执行以下操作：

1. 拆下固定定位。包裹在一个 div 中并指定宽度 100%。
2. 为您设置宽度ul。如果你想让你ul随着增加而li增加，你可以将ul宽度设置为继承。
3. 如果您仍然无法做到，请发表评论，我会为您上传代码。但我相信你可以自己做。

Answer 3

可能是因为你用过float:left。