由于ul
和li
元素是display: block
默认设置-为它们提供自动边距,并且宽度小于其container
。
ul {
width: 70%;
margin: auto;
}
如果您更改了它们的显示属性,或做了一些覆盖常规对齐规则的操作(例如浮动它们),则此操作将无效。
要使ul 居中并使li元素也居中,并使ul的宽度动态变化,请使用display:inline-block; 并将其包裹在居中的div中。
<style type="text/css">
.wrapper {
text-align: center;
}
.wrapper ul {
display: inline-block;
margin: 0;
padding: 0;
/* For IE, the outcast */
zoom:1;
*display: inline;
}
.wrapper li {
float: left;
padding: 2px 5px;
border: 1px solid black;
}
</style>
<div class="wrapper">
<ul>
<li>Three</li>
<li>Blind</li>
<li>Mice</li>
</ul>
</div>