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。