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

当我查看您的页面时，看起来您真正需要更改的部分是“主导航”类。

#container div包含整个页面，所以你不想搞砸那个页面。

更改菜单栏宽度

2 个答案: