居中对齐导航

Question

我正在尝试将导航对齐到中心，但我似乎无法使其工作！ 您能否查看以下代码并让我知道可以做什么。 谢谢

<ul id="nav" style="width:100%; ">
<li><a href="http://www.script-tutorials.com/">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>

.CSS：

#nav,#nav ul {
list-style: none outside none;
}
#nav {
font-family:Tahoma, Geneva, sans-serif;
margin:0 auto;
clear: both;
font-size: 14px;
height: 58px;
padding: 0 0 0 0px;
position: relative;
width: 700px;
}
#nav ul {
background-color: #FFF;
border:1px solid #001;
border-radius: 0 5px 5px 5px;
border-width: 1px 1px 1px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
/*-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;*/
}
#nav li {
margin:auto;
float: left;
position: relative;
}
#nav li a {
color:#001;
font-weight:500;
height: 30px;
display:block;
text-align:center;
padding: 15px 32px 0;
position: relative;
text-decoration: none;
}
#nav li:hover > a {
color: #FFF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #001;
outline: 0 none;
}
#nav li:hover ul.subs {
left: 0px;
top: 40px;
width: 150px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#nav ul li {
background-color: #EEEEEE;
width: 100%;
}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #001;
color: #BF0000;
}

Answer 1

一种解决方案是使用 text-align: center 来#nav ul 。发布整个css后，刚刚从nav中删除了内联width: 100%：

#nav,
#nav ul {
  list-style: none outside none;
  /*text-align: center;*/
}
#nav {
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0 auto;
  clear: both;
  font-size: 14px;
  height: 58px;
  padding: 0 0 0 0px;
  position: relative;
  width: 700px;
}
#nav ul {
  background-color: #FFF;
  border: 1px solid #001;
  border-radius: 0 5px 5px 5px;
  border-width: 1px 1px 1px;
  overflow: hidden;
  position: absolute;
  top: -9999px;
  z-index: 2;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  /*-moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;*/
}
#nav li {
  margin: auto;
  float: left;
  position: relative;
}
#nav li a {
  color: #001;
  font-weight: 500;
  height: 30px;
  display: block;
  text-align: center;
  padding: 15px 32px 0;
  position: relative;
  text-decoration: none;
}
#nav li:hover > a {
  color: #FFF;
}
#nav li:hover,
#nav a:focus,
#nav a:hover,
#nav a:active {
  background: none repeat scroll 0 0 #001;
  outline: 0 none;
}
#nav li:hover ul.subs {
  left: 0px;
  top: 40px;
  width: 150px;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
#nav ul li {
  background-color: #EEEEEE;
  width: 100%;
}
#nav ul li a {
  float: none;
}
#nav ul li:hover > a {
  background-color: #001;
  color: #BF0000;
}

<ul id="nav">
  <li><a href="http://www.script-tutorials.com/">Home</a>
  </li>
  <li><a class="hsubs" href="#">Menu 1</a>
    <ul class="subs">
      <li><a href="#">Submenu 1</a>
      </li>
      <li><a href="#">Submenu 2</a>
      </li>
      <li><a href="#">Submenu 3</a>
      </li>
      <li><a href="#">Submenu 4</a>
      </li>
      <li><a href="#">Submenu 5</a>
      </li>
    </ul>
  </li>
  <li><a class="hsubs" href="#">Menu 2</a>
    <ul class="subs">
      <li><a href="#">Submenu 2-1</a>
      </li>
      <li><a href="#">Submenu 2-2</a>
      </li>
      <li><a href="#">Submenu 2-3</a>
      </li>
      <li><a href="#">Submenu 2-4</a>
      </li>
      <li><a href="#">Submenu 2-5</a>
      </li>
      <li><a href="#">Submenu 2-6</a>
      </li>
      <li><a href="#">Submenu 2-7</a>
      </li>
      <li><a href="#">Submenu 2-8</a>
      </li>
    </ul>
  </li>
  <li><a class="hsubs" href="#">Menu 3</a>
    <ul class="subs">
      <li><a href="#">Submenu 3-1</a>
      </li>
      <li><a href="#">Submenu 3-2</a>
      </li>
      <li><a href="#">Submenu 3-3</a>
      </li>
      <li><a href="#">Submenu 3-4</a>
      </li>
      <li><a href="#">Submenu 3-5</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a>
  </li>
  <li><a href="#">Menu 5</a>
  </li>

Answer 2

一种可能的解决方案是：

将
1. 导航列表包装到<div>包装器中，text-align:center
2. 在<ul>元素上使用display: inline-block。
3. 在<li> -Elements 上使用 display: inline-block 使它们内联。

见 http://jsfiddle.net/rd74ua20/