Question

我有一个小问题我基本上希望在中心有一个ul菜单，而灰色条没有消失。

我尝试在这里搜索，大多数答案与css display标签有关但我尝试了所有选项，但没有一个让菜单站在中间。

HTML

<div id="nav" style="margin:auto">
<ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../info.html">Info</a></li>
    <li><a href="../chao.html">Chao</a></li>
    <li><a href="../media.html">Media</a></li>
</ul>

CSS

body {background:#192644; margin:0; padding:0;}
#nav {
    font-family: Verdana;
    width: 100%;
    float: left;
    background-color: #303030;
    border-bottom: 3px solid #000;
    text-transform:uppercase; 
    text-align:center;
    font-size:14px;}
#nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
       display: block;
       width: 100%; }
#nav li {display: table-cell }
#nav li a {
    width:100px;
    display: block;
    padding: 12px;
    text-decoration: none;
    font-weight: bold;
    color: #B3B3B3;}
#nav li a:hover {color: #FFF; background-color: #404040; }

Answer 1

从

改变

#nav li {display: table-cell }

到

#nav li {display: inline-block }

http://jsfiddle.net/vVH4d/1/

Answer 2

http://jsfiddle.net/vVH4d/3/

您可以使用li设置内部#nav li { ... display: inline-block; ... }标记。这是所有菜单的中心。

Answer 3

简单！只需将#nav li {display: table-cell; }更改为#nav li {display: inline-block; }

即可

此外，您可以从style="margin:auto" div中删除 nav。在这种情况下不需要它。作为一般经验法则，尽量避免使用inline样式并使用CSS代替。 IMO，应该使用inline样式的唯一时间是通过jQuery / js动态创建或者创建电子邮件模板等。

http://jsfiddle.net/vVH4d/4/

Answer 4

Try it .It will work fine!
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Margin Auto</title>
    <style>
body {background:#192644; margin:0; padding:0;}
#nav {
    font-family: Verdana;
    width: 100%;
    margin:0px auto;
    background-color: #303030;
    border-bottom: 3px solid #000;
    text-transform:uppercase; 
    text-align:center;
    font-size:14px;}
#nav ul {
    list-style: none;
    margin: 0px auto;
    padding: 0;
    display: block;
    width: 100%; }
#nav ul li {display: inline-block;}
#nav li a {
    width:100px;
    display: block;
    padding: 12px;
    text-decoration: none;
    font-weight: bold;
    color: #B3B3B3;}
#nav li a:hover {color: #FFF; background-color: #404040; }
    </style>

</head>
<body>

<div id="nav">
<ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../info.html">Info</a></li>
    <li><a href="../chao.html">Chao</a></li>
    <li><a href="../media.html">Media</a></li>
</ul>
</div>
</body>
</html>

在水平条中以100％宽度对齐具有相同宽度的菜单项

4 个答案: