我在导航居中时遇到问题。尝试了所有可能的方法。无法居中。想知道可能会影响什么?我只需要定位 .nav 吗?还是容器也是?我的网站:
HTML
<div id="navcontainer">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test">
<li><a href="index.html" id="current">PRADŽIA</a></li>
<li><a href="apie.html">APIE MUS</a></li>
<li><a href="kainos.html">KAINOS</a></li>
<li><a href="asmenines.html">ASMENINĖS</a>
<ul>
<li><a href="#">Asmeninė fotosesija</a></li>
<li><a href="#">Poros fotosesija</a></li>
<li><a href="#">Šeimos fotosesija</a></li>
<li><a href="#">Nėščiosios fotosesija</a></li>
<li><a href="#">Vaikų fotosesija</a></li>
<li><a href="#">Draugų fotosesija</a></li>
<li><a href="#">Erotinė fotosesija</a></li>
<li><a href="#">Švencių fotosesija</a></li>
<li><a href="#">Modelio testas</a></li>
</ul>
</li>
<li><a href="kurybines.html">KŪRYBINĖS</a></li>
<li><a href="atsiliepimai.html">ATSILIEPIMAI</a></li>
<li><a href="kontaktai.html">KONTAKTAI</a></li>
</li>
</ul>
</div>
</div><!--/navcontainer-->
CSS
/*---- NAVIGATION -------*/
#navcontainer{
float: left;
width:100%;
padding: 10px 0 10px 0;
font-size:1.2em;
background: #ccc;
}
.toggleMenu {
display: none;
padding: 10px 15px;
color: #fff;
background:#383636;
}
.nav {
list-style: none;
*zoom: 1;
background: blue;
margin: 0 auto;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
display: inline-block;
list-style-type: none;
width: 9em;
}
.nav a {
display: inline-block;
padding: 10px 15px;
color:#383636;
text-decoration:none;
}
.nav li {
position: relative;
display: inline;
}
.nav > li {
float: left;
}
.nav > li > .parent {
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #efefef;
position: relative;
z-index:100;
border-top: 1px solid #ccc;
}
#navcontainer ul li a:hover{
color: #fff;
background: #ccc;
}
#navcontainer ul li a#current{
color: #fff;
background: #ccc;
}