尝试将导航栏中的字词置于中心位置。我尝试过在网上找到的一堆不同的配置，到目前为止还没有运气。
另外，有什么办法可以让导航栏看起来更干净，更专业吗？
提前谢谢
<div class="nav-container clearfix">
<ul id="nav">
<li class="first"><a href="<?php echo Mage::getBaseUrl(); ?>"><span>Home</a></li>
<li><a href="<?php echo Mage::getBaseUrl(); ?>whysoy"><span>Why Soy?</a></li>
<li><a href="<?php echo Mage::getBaseUrl(); ?>plantatree"><span>Candle Sold, Tree Planted</a></li>
<li><a href="<?php echo Mage::getBaseUrl(); ?>build-a-candle.html"><span>Build-a-Candle</a></li>
<li><a href="<?php echo Mage::getBaseUrl(); ?>contact-us"><span>Contact Us</a></li>
<li><a class="category" href="<?php echo Mage::getBaseUrl(); ?>all-products">
<span>Buy Products</span>
<ul class="level0">
<?php echo $_menu ?>
</ul>
</a>
</li>
</ul>
/*** CLEARFIX ******/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both
}
/********** < Navigation */
.nav-container {clear: both; width:100%; float: left; text-align: center; margin: 10px 0px 10px; text-transform: uppercase; font-weight: bold; display: inline; background:#d4dadd !important; box-shadow: 10px 10px 5px #888888 !important; }
#nav { margin:0 auto; padding:0; font-size:12px; }
/* All Levels */ /* Style consistent throughout all nav levels */
#nav li {
display: inline-block;
padding: 5px;
margin: 5px;
border-right: 1px solid #000;
list-style: none;
vertical-align: top;
height: 50px;
position:relative;
}
#nav li.over { z-index:998; background-color: #b3bec3; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; padding: 10px;
text-align: center; }
#nav span { display:block; cursor:pointer; }
#nav li ul span {white-space:normal; }
#nav ul li.parent a {}
#nav ul li.parent li a { background-image:none; }
#nav a.category span { background: url(../images/nav-category.gif) no-repeat center right; padding-right: 20px; }
/* 0 Level */
#nav li.active a { color:#2882ce; }
#nav a { font-size: 115%; color:#303030; }
#nav li.last a { padding-right: 0px !important;}
#nav li.over a,
#nav a:hover { color:#2882ce; }
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#d4dadd; }
#nav ul li.last { background:#d4dadd; padding-bottom:0; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-size: 100% !important; font-weight:normal !important; }
/* 2nd Level */
#nav ul,
#nav div { position:absolute; width:15em; top:27px; left:-10000px; border:1px solid #899ba5; }
#nav div ul { position:static; width:auto; border:none; }
/* 3rd+ Level */
#nav ul ul,
#nav ul div { top:5px; }
#nav ul li a { background:#d4dadd; }
#nav ul li a:hover { background:#b3bec3; }
#nav ul li a,
#nav ul li a:hover { color:#2f2f2f !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { left:0; z-index:999; }
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { left:100px; }
<div class="nav-container clearfix">
<ul id="nav">
<li class="first"><a href="<?php echo Mage::getBaseUrl(); ?>"><span>Home</a></li>
<li><a href="<?php echo Mage::getBaseUrl(); ?>whysoy"><span>Why Soy?</a></li>
<li><a href="<?php echo Mage::getBaseUrl(); ?>plantatree"><span>Candle Sold, Tree Planted</a></li>
<li><a href="<?php echo Mage::getBaseUrl(); ?>build-a-candle.html"><span>Build-a-Candle</a></li>
<li><a href="<?php echo Mage::getBaseUrl(); ?>contact-us"><span>Contact Us</a></li>
<li><a class="category" href="<?php echo Mage::getBaseUrl(); ?>all-products">
<span>Buy Products</span>
<ul class="level0">
<?php echo $_menu ?>
</ul>
</a>
</li>
</ul>
答案 0 :(得分：0)
我稍微更改了您的代码，下面是一个片段，看这个代码片段工作点击“完整页面”按钮。
UPDATED片段基于OP的评论来回答。 <击>
/*** CLEARFIX ******/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both
}
/********** < Navigation */
.nav-container {
clear: both;
width: 100%;
float: left;
margin: 10px 0px 10px;
text-transform: uppercase;
font-weight: bold;
display: inline;
background: #ecf3f6 !important;
box-shadow: 10px 10px 5px #888888 !important;
}
#nav {
margin: 0 auto;
padding: 0;
font-size: 12px;
}
/* All Levels */
/* Style consistent throughout all nav levels */
#nav li {
display: inline-block;
margin: 5px 0;
border-right: 1px solid #000;
list-style: none;
vertical-align: top;
height: 70px;
width:16.3%
}
#nav li:last-child {
border-right: 0
}
#nav li.over {
z-index: 998;
background-color: #d4dadd;
}
#nav a,
#nav a:hover {
display: block;
line-height: 1.3em;
text-decoration: none;
padding: 10px;
text-align: center
}
#nav span {
display: block;
cursor: pointer
}
#nav li ul span {
white-space: normal;
}
#nav ul li.parent a {} #nav ul li.parent li a {
background-image: none;
}
#nav a.category span {
background: url(../images/nav-category.gif) no-repeat center right;
padding-right: 20px;
}
/* 0 Level */
#nav li.active a {
color: #2882ce;
}
#nav a {
font-size: 115%;
color: #303030;
}
#nav li.last a {
padding-right: 0px !important;
}
#nav li.over a,
#nav a:hover {
color: #2882ce;
}
/* 1st Level */
#nav ul li,
#nav ul li.active {
float: none;
margin: 0;
padding-bottom: 1px;
background: #ecf3f6;
}
#nav ul li.last {
background: #ecf3f6;
padding-bottom: 0;
}
#nav ul a,
#nav ul a:hover {
float: none;
padding: 0;
background: none;
}
#nav ul li a {
font-size: 100% !important;
font-weight: normal !important;
}
/* 2nd Level */
#nav ul,
#nav div {
position: absolute;
width: 15em;
top: 27px;
left: -10000px;
border: 1px solid #899ba5;
}
#nav div ul {
position: static;
width: auto;
border: none;
}
/* 3rd+ Level */
#nav ul ul,
#nav ul div {
top: 5px;
}
#nav ul li a {
background: #ecf3f6;
}
#nav ul li a:hover {
background: #d5e4eb;
}
#nav ul li a,
#nav ul li a:hover {
color: #2f2f2f !important;
}
#nav ul span,
#nav ul li.last li span {
padding: 3px 15px 4px 15px;
}
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub {
left: 0;
z-index: 999;
}
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub {
left: 100px;
}<div class="nav-container clearfix">
<ul id="nav">
<li class="first"><a href=""><span>Home</span></a>
</li>
<li><a href="">whysoy<span>Why Soy?</span></a>
</li>
<li><a href="">plantatree<span>Candle Sold, Tree Planted</span></a>
</li>
<li><a href=""><span>Build-a-Candle</span></a>
</li>
<li><a href=""><span>Contact Us</span></a>
</li>
<li><a class="category" href=""><span>Buy Products</span>
<ul class="level0">
</ul>
</a>
</li>
</ul>
</div>
更新＃3 （来自OP的新信息）
为了实现您的目标，只需在CSS上进行以下更改：
.nav-container {
background: none repeat scroll 0 0 #d4dadd !important;
box-shadow: 10px 10px 5px #888888 !important;
float: left;
font-size: 0;
font-weight: bold;
margin: 10px 0;
text-align: center;
text-transform: uppercase;
width: 100%;
}
#nav li {
border-right: 1px solid #000;
display: inline-block;
font-size: 12px;
height: 50px;
list-style: none outside none;
margin: 5px 0;
padding: 5px;
position: relative;
vertical-align: top;
width: 15%;
}
#nav ul li, #nav ul li.active {
background: none repeat scroll 0 0 #d4dadd;
border-right: 0 none;
display: block;
float: none;
margin: 0;
width: 100%;
}
/*you may delete this:
#nav ul li.last {
}*/