2

我正在尝试使菜单栏居中并使菜单栏适合文本。这是我正在尝试编辑的网站：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，它影响的整个页面，而不仅仅是菜单栏。任何想法如何解决它？

4

2 回答 2

2

你可以非常非常相似地做到这一点:)。的影响之一display: inline-block;是元素尝试调整自身大小以包含其子元素。float您可以使用or也可以实现此目的position: absolute，但这些并不真正适合此布局。

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

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

提示：如果您使用浏览器的检查器（所有现代浏览器都有一个相当不错的），您可以轻松找出需要更改的元素。

于 2013-06-03T23:01:32.687 回答
0

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

#container div 包含您的整个页面，因此您不想弄乱那个页面。

于 2013-06-03T23:03:21.617 回答