居中我的导航菜单链接
Posted
技术标签:
【中文标题】居中我的导航菜单链接【英文标题】：Centering my navigation menu links 【发布时间】：2012-06-11 21:11:45 【问题描述】：我似乎无法弄清楚这一点。我试过 text-align: center; , display: inline-block 等等，但我只是不知道如何在#menu-bottom-nav 中将导航居中。
CSS
#menu-bottom-nav width: 600px; height: 70px; margin: 0px auto;
#menu-bottom-nav li list-style-type: none; float: left; margin-right: 20px;
感谢任何帮助。
【问题讨论】：
如果你把 li 的左边浮起来，你会怎么期待呢？！ 好吧，如果我不这样做，它们就不会像我想要的那样出现在两条线上。 您不能将没有固定宽度的项目居中。 是的，你可以在没有固定宽度的情况下居中，这太荒谬了。 它们什么时候会出现在两行上？在这里，我会发布一个答案。没有您的 html，我们无法确定发生了什么... 【参考方案1】：试试这个：
<!DOCTYPE>
<html>
<head>
<title>Test</title>
<style type="text/css">
#menu-bottom-nav
margin: 0;
padding: 0;
width: 600px;
text-align: center;
border: 1px solid #000;
#menu-bottom-nav li
list-style-type: none;
margin-right: 20px;
border: 1px solid #ff0000;
display: inline-block;
*display: inline;
zoom: 1;
</style>
</head>
<body>
<ul id="menu-bottom-nav">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</body>
</html>
【讨论】：
感谢 ianpgail。 :) 我会记住导航菜单的格式和样式。 没问题！你可以使用 inline-block 或 inline，这取决于你！ 我刚刚在 IE 7 中看到它，但它在那里不起作用。你知道为什么会这样吗？ 我刚刚在我的帖子中为“#menu-bottom-nav li”添加了 CSS 属性。试试看！ 这就是您所需要的。哇。再次感谢。以上是关于居中我的导航菜单链接的主要内容，如果未能解决你的问题，请参考以下文章