【发布时间】：2015-03-25 02:02:16
【问题描述】：
我正在尝试将我的导航对齐在中心，但我似乎无法让它工作！你能看看下面的代码，让我知道可以做什么。谢谢你
<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;
}
【问题讨论】：
-
#nav,#nav ul { 列表样式：无外无； } #nav { font-family:Tahoma, Geneva, sans-serif;边距：0 自动；明确：两者；字体大小：14px；高度：58px；填充：0 0 0 0px；位置：相对；宽度：700px； } #nav ul { 背景颜色：#FFF;边框：1px 实心 #001;边框半径：0 5px 5px 5px；边框宽度：1px 1px 1px；溢出：隐藏；位置：绝对；顶部：-9999 像素； z-index: 2;
-
我建议您编辑您的问题以包含 CSS，如果可能，请提供一个 JSfiddle.net 示例。
-
您试图将您的“导航”对齐在什么的中心？
标签： jquery html css hyperlink navigation