将<ul> <li>中心转换为div

Question

经过一些搜索，我没有找到一个正确的方法来将列表中心<li>固定到一个固定的宽度div。

看看页面 ..它也不起作用！

Answer 1

因为ul和li元素是display: block默认的 - 给它们自动边距和宽度小于它们的容器。ul {&nbsp; &nbsp; width: 70%;&nbsp; &nbsp; margin: auto;}如果你已经改变了它们的显示属性，或者做了一些覆盖正常对齐规则的东西（例如浮动它们）那么这将不起作用。

Answer 2

要使ul 居中并且也将li元素置于其中心，并使ul的宽度动态变化，请使用display：inline-block; 并将其包裹在一个居中的div中。<style type="text/css">&nbsp; &nbsp; .wrapper {&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; }&nbsp; &nbsp; .wrapper ul {&nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; /* For IE, the outcast */&nbsp; &nbsp; &nbsp; &nbsp; zoom:1;&nbsp; &nbsp; &nbsp; &nbsp; *display: inline;&nbsp; &nbsp; }&nbsp; &nbsp; .wrapper li {&nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; padding: 2px 5px;&nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; }</style><div class="wrapper">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>Three</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Blind</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Mice</li>&nbsp; &nbsp; </ul></div>

Answer 3

脚步 ：写style="text-align:center;"于母公司div的ul写style="display:inline-table;"至ul写style="display:inline;"至li或使用<div class="menu">&nbsp;<ul>&nbsp; &nbsp;<li>item 1 </li>&nbsp; &nbsp;<li>item 2 </li>&nbsp; &nbsp;<li>item 3 </li>&nbsp;</ul></div><style>&nbsp;.menu { text-align: center; }&nbsp;.menu ul { display:inline-table; }&nbsp;.menu li { display:inline; }</style>