-1

我尝试了很多方法，但无法让这个菜单居中..有什么想法吗？

您可以在此处查看该页面：http: //jsbin.com/obecig/1/edit

我在#nav ul 选择器中尝试了 text-align:center 但没有运气..

<html>
<head>
<style type="text/css">
#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}

li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}
li:hover { position:relative; z-index:2000; }
</style>
</head>

<body>
<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        <ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>
</body>

</html>
4

4 回答 4

2

看到每个人都如何回答同样的事情，没有人费心解释为什么......我们开始吧：

众所周知，如果您不知道如何使块级元素居中，可能会很痛苦。首先，我们大多数人都知道这是可行的margin: 0 auto;，但不是每个人都知道为什么。

快速分解margin: 0 auto;与 CSS 接受某些属性的速记符号的方式有关。假设margin您当然是针对给定元素的边距，并且该0部分使用速记表示法表示：顶部为 0，底部为 0 ...同时auto在末尾添加您说的是：左侧的自动边距和自动右边的边距。

如果您没有为相关元素定义宽度，上述方法将不起作用。在这种情况下，元素的 ID 属性为#nav... 这就是为什么每个人在答案中给出的示例都有固定宽度的原因。这背后的逻辑是块级元素默认扩展其父容器的 100%，除非您在 CSS 中特别定义。

所以理论上这也适用于居中，虽然它是更多的标记而不是为简单起见的最佳方法，但我只是为了说明目的而展示它。

#nav {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

每个人都更习惯这样看……我们这样使用它是因为它更短。

#nav {
  width: 300px;
  margin: 0 auto;
}

零不是必须的.​​.....请记住，它是元素的顶部和底部边距。话虽如此，下面是一个底部有 20 像素边距并居中的元素示例。

#nav {
  width: 300px;
  margin: 0 auto 20px auto;
}

最后但并非最不重要的...此属性 ( )的简写符号与以下相同margin：borderpadding

所以它是：上、右、下、左。像这样：margin: 10px 20px 30px 40px

于 2013-08-10T16:32:44.813 回答
1

您需要给它一个宽度，然后将水平边距设置为自动。无论如何，这是最快的方法。

将此添加到您的CSS：

#nav
{
     width:100px;
     margin: 0 auto;
}
于 2012-10-31T16:15:42.097 回答
0

为了使某些东西居中，它需要一个宽度和边距：0 auto，所以如果你添加这个代码：

#nav { 
  width: 100px; 
  margin: 0 auto; 
}

它应该（并且为我做了）工作

于 2012-10-31T16:14:52.597 回答
0 
#nav{
 width:80px;
 margin: 0 auto;}
于 2012-10-31T16:18:47.993 回答