ul li 列表的居中显示

来源：互联网发布：gta5手机网络中的网站编辑：程序博客网时间：2024/04/26 15:10

<head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        #div1 {            width: 500px;            height: 500px;            background-color: red;        }        #ul1 {            height: 40px;            width: auto;            /*会作为块级元素显示,表格前后带有换行符*/            display: table;            margin: 0 auto;                     text-align: center;            padding: 0;        }        .li1 {            float: left;            margin-left:1px;            padding: 0;            width: 70px;            height: 60px;            line-height: 60px;            font-size: 20px;            background-color: yellow;            list-style-type: none;        }    </style></head><body>    <div id="div1">        <ul id="ul1">            <li class="li1">11111</li>            <li class="li1">22222</li>            <li class="li1">33333</li>            <li class="li1">44444</li>        </ul>    </div></body>

这里写代码片

设置ul的display：table，text-align:center。是不是觉得好神奇，怎么会出现display：table，说实话，这也是我第一次用到这个属性，虽然知道有这个属性，但一般还真不用，我们似乎只用none，inline和block，但这里我们必须用这个属性，不然解决不了。

block：此元素将显示为块级元素，此元素前后会带有换行符
inline:此元素会被显示为内联元素，元素前后没有换行符。
table:此元素将显示为块级元素，此元素前后不会带有换行符

0 0