更改菜单栏宽度

Question

我正在尝试居中菜单栏，使菜单栏适合文本。这是一个我正在尝试编辑的网站：http://www.graffitisumperk.g6.cz/blog/

我已经知道我可以用这种方式将菜单项居中：

.menu {
    text-align:center
}
.menu li {
    display:inline-block;
    float:none;
    margin-left: -5px;
}
.menu li li {
    display:block;
    text-align:left
}

但是我好像不能让菜单栏适应菜单项的宽度。我计算过它的长度应该是445px，但当我改变这个长度时：

#container {
    margin: 0 auto;
    max-width: 960px;

到445px，整个页面都会受到影响，而不仅仅是菜单栏。有什么办法解决这个问题吗？

Answer 1

您可以非常类似地执行此操作:)。display: inline-block;的作用之一是元素尝试调整自身大小以包含其子元素。您也可以使用float或position: absolute来实现这一点，但它们并不真正适合这种布局。

.main-nav { text-align: center; }
.menu { display: inline-block; }

我猜你可能想要居中菜单，所以我也添加了text-align。

提示：如果您使用浏览器的检查器(所有现代浏览器都有一个相当不错的检查器)，您可以很容易地确定需要更改哪个元素。

Answer 2

当我查看您的页面时，看起来您真正需要更改的部分是"main-nav“类。

container div包含整个页面，所以你不想弄乱它。