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

Question

经过一些搜索，我没有找到一个正确的方法来将列表中心<li>固定到一个固定的宽度div。看看页面 ..它也不起作用！

Answer 1

因为ul和li元素是display: block默认的 - 给它们自动边距和宽度小于它们的容器。

ul {

    width: 70%;

    margin: auto;

}

如果你已经改变了它们的显示属性，或者做了一些覆盖正常对齐规则的东西（例如浮动它们）那么这将不起作用。

Answer 2

要使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>

Answer 3

脚步 ：

写style="text-align:center;"于母公司div的ul

写style="display:inline-table;"至ul

写style="display:inline;"至li

或使用

<div class="menu">

 <ul>

   <li>item 1 </li>

   <li>item 2 </li>

   <li>item 3 </li>

 </ul>

</div>

<style>

 .menu { text-align: center; }

 .menu ul { display:inline-table; }

 .menu li { display:inline; }

</style>