无序列表的居中对齐

无序列表的居中对齐

• 解决办法
• • 方法一
  • 方法二
• 溜了溜了

同学门是不是经常会遇到ul里的li不能居中对齐的情况呢。确实，我也经常遇到。我安静写着代码。突然想起好久没写播客，所以今天它来了。

解决办法

方法一

1.我们用到无序列表，一般都是li里面包含a标签，就像这样

 <div class="box">
        <ul>
            <li><a href="">li的居中</a></li>
            <li><a href="">li的居中</a></li>
            <li><a href="">li的居中</a></li>
            <li><a href="">li的居中</a></li>
            <li><a href="">li的居中</a></li>
        </ul>
    </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

2.然后给li设置浮动，就像这样

 .box ul li {
            float: left;   
            padding: 0 20px;
            margin: 0 10px;
            background-color: rebeccapurple;
            /*任意设置li的宽度，不设置宽度的话也可以设置padding*/
        }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

3.最后就是给ul**设置 **text-align: center;属性了

 .box ul {      
 			text-align: center;  
            border: 1px solid red;
        }

• 1
• 2
• 3
• 4

可是最后并没有效果。

可以看到ul的高度只有2px，这是边框的宽度。因为li有 ** 浮动**的属性。所以要清除浮动。

4.最后让 ul 在盒子里居中显示

.box ul {
            display: table;
            /*这里是关键步骤：*/
            margin: 0 auto;
            /*让ul在div中水平居中 */
            border: 1px solid #f00;
        }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

方法二

1.给ul设置 display: inline-block;属性

 .box ul {
            display: inline-block;
            border: 1px solid #f00;
        }
        

• 1
• 2
• 3
• 4
• 5

2.给li设置 display: inline-block;属性

 .box ul li {
            display: inline-block;
            padding: 0 20px;
            margin: 0 10px;
            background-color: rebeccapurple;
        }

• 1
• 2
• 3
• 4
• 5
• 6

3.给父盒子设置text-align: center;属性

 .box {
            background: pink;
            border: 1px solid #000;
            margin-top: 300px;
            text-align: center;
        }

• 1
• 2
• 3
• 4
• 5
• 6

效果：

溜了溜了