这个列表对我很有用,但< li>中的文字很有用.元素不居中.
#nav-menu { font-family: Verdana,Arial,Helvetica,sans-serif; height: 30px; background-image: url(../img/menu_bg.png); background-repeat: repeat-x; border-bottom: dotted thin #666666; border-top: dotted thin #666666; text-align: center; width: 800px; } #nav-menu ul { list-style: none; padding: 0; margin: auto 0; } #nav-menu li { float: left; border-right: dotted thin #666666; list-style: none; padding: 0.5em 2em 0.5em 0.75em; } #nav-menu li a { line-height: 1.5em; color: #333333; text-decoration: none; font-size: 12px; font-weight: bold; display: block; }
<div id="nav-menu"> <ul> <li class="current_page_item"><a href="#" title="Home">Home</a> <li class="current_page_item"><a href="#" title="Home">Home</a> <li class="current_page_item"><a href="#" title="Home">Home</a> <li class="current_page_item"><a href="#" title="Home">zxczczxczHome</a> </ul> </div>
解决方法@H_502_10@
当您在li的左侧和右侧(分别为0.75em和2em)分配不相等的填充值时,文本无法居中,因为您使用填充将其强制偏离中心.
如果你修改填充:padding:0.5em 1em; (0.5em顶部和底部,左侧和右侧1em)然后它可以居中.
#nav-menu {
font-family: Verdana,sans-serif;
height: 30px;
background-image: url(../img/menu_bg.png);
background-repeat: repeat-x;
border-bottom: dotted thin #666666;
border-top: dotted thin #666666;
text-align: center;
width: 800px;
}
#nav-menu ul {
list-style: none;
padding: 0;
margin: auto 0;
}
#nav-menu li {
float: left;
border-right: dotted thin #666666;
list-style: none;
padding: 0.5em 1em;
}
#nav-menu li a {
line-height: 1.5em;
color: #333333;
text-decoration: none;
font-size: 12px;
font-weight: bold;
display: block;
}
<div id="nav-menu">
<ul>
<li class="current_page_item"><a href="#" title="Home">Home</a></li>
<li class="current_page_item"><a href="#" title="Home">Home</a></li>
<li class="current_page_item"><a href="#" title="Home">Home</a></li>
<li class="current_page_item"><a href="#" title="Home">zxczczxczHome</a></li>
</ul>
</div>
如果你修改填充:padding:0.5em 1em; (0.5em顶部和底部,左侧和右侧1em)然后它可以居中.
#nav-menu { font-family: Verdana,sans-serif; height: 30px; background-image: url(../img/menu_bg.png); background-repeat: repeat-x; border-bottom: dotted thin #666666; border-top: dotted thin #666666; text-align: center; width: 800px; } #nav-menu ul { list-style: none; padding: 0; margin: auto 0; } #nav-menu li { float: left; border-right: dotted thin #666666; list-style: none; padding: 0.5em 1em; } #nav-menu li a { line-height: 1.5em; color: #333333; text-decoration: none; font-size: 12px; font-weight: bold; display: block; }
<div id="nav-menu"> <ul> <li class="current_page_item"><a href="#" title="Home">Home</a></li> <li class="current_page_item"><a href="#" title="Home">Home</a></li> <li class="current_page_item"><a href="#" title="Home">Home</a></li> <li class="current_page_item"><a href="#" title="Home">zxczczxczHome</a></li> </ul> </div>