Question

因为我正在为我的网站工作导航栏。但是我想把它集中在一起，margin auto不起作用。这是我的HTML代码：

<!DOCTYPE html>    
<html>
<head>
  <title>Homepage - Trolltime</title>
  <link rel="stylesheet" type="text/css" href="default.css">
</head>

<body>
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
    <li><a href="">About</a></li>
  </ul>
</body>
</html>

这是我的CSS代码：

li:hover {font-size:120%}
li:visited{color:black}

ul.nav {
  display: inline-block;
  list-style-type: none;
}

li{
  display:inline;
  float:left;
  margin:auto;
  list-style-type:none;
  font-family:Verdana;
  display:block;
  width:100px;
}
ul { list-style-type:none; }
body { background-color:#33CCFF; }

谢谢。

Answer 1

Working Fiddle

在html中你已经使用了id而在css中你已经给了类导航。请参阅下文。

ul#nav{
display: block;
list-style-type: none;
margin:0 auto;
width:500px;
}

Answer 2

试试这段代码，例如：

＆＃13;

li:hover {font-size:120%}
li:visited{color:black}

ul#nav {
  display: inline-block;
  list-style-type: none;
}

li {
  display:inline !important;
  list-style-type:none;
  font-family:Verdana;
  display:block;
  width:100px;
}
ul { list-style-type:none; }
body { background-color:#33CCFF; }
.wrapMenu{ text-align:center; }

＆＃13;

<div class="wrapMenu">
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
    <li><a href="">About</a></li>    
  </ul>
</div>

＆＃13;

Answer 3

遵循以下想法：

nav ul {
    overflow: auto;
}

nav li {
    list-style-type: none;
    text-align: center;
    cursor: pointer;
    color: #FFFFFF;
}

nav.horizontal {
    display: table;
    margin: auto;
    table-layout: fixed;
    width: 100%;
}

nav.horizontal ul {
    display: table-row;
}

nav.horizontal li {
    display: table-cell;
}

Answer 4

这是我的解决方案：

我改变了：

ul.nav { 
  display: inline-block;
  list-style-type: none;
}

为：

ul#nav { text-align: center; }

在li display: inline上，您同时拥有display: block;和display: block 我已删除：float: left和display: inline，并将display: inline-block更改为{{1}}。

的 Example

我想把我的导航栏放在CSS中心

4 个答案: