感谢您阅读本文,我有一个菜单,它通过填充 ul 的左侧和右侧来居中,但我认为这会在左侧的 IE 中留下一些白色的空白空间
它在 Chrome、Firefox 和 Opera 中看起来不错,但在 IE(每个版本)中都有空间并且它没有居中
这是HTML
<div class="menu">
<ul>
<li id="current"><a href="#">Strona Glowna</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Wlasciciel</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
和CSS
.menu {
border:none;
border:0px;
margin:0px;
padding:opx;
font: 100% Arial;
font-size:14px;
font-weight:900;
}
.menu ul {
background:#333333;
height:35px;
list-style:none;
margin:auto;
padding:0 242px 0;
}
.menu li {
float:left;
padding:0px;
}
.menu li a {
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #FF0000 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul {
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
}
.menu li:hover ul {
display:block;
}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a {
background:none;
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu li ul #current {
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p {
clear:left;
}
现场演示可以在adamlisik.co.uk/kantor下找到
感谢你的帮助