0
내 탐색 모음의 단어를 가운데 맞추려고합니다. 나는 온라인과 지금까지 아무런 운도 발견 다른 configs의 무리를 시도했다.웹 탐색 모음이 가운데에 맞지 않음
또한 내비게이션 막대가 더 깨끗하고 전문적으로 보이도록 할 수있는 방법이 있습니까?
내가이 조각 작업 클릭 전체 페이지 버튼을보고, 여기에 코드를 약간 변경 코드 조각 다음과 같습니다<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>
일부 'width'를 여기에 추가하십시오 :'#nav {margin : 0 auto; 패딩 : 0; 글꼴 크기 : 12px; }' – dippas
@dippas 그 줄에 너비를 추가하면 목록이 가로 대신 세로로 변경됩니다. 나는 한 줄로 만들기 위해 'display : inline'을 넣었다. 이로 인해 너비를 변경할 수없는 모든 너비와 마찬가지로 너비 변수가 유효하지 않게되어 nav가 변경되지 않습니다. –