css怎样设置ul的li 居中均匀排列

Posted 2023-04-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css怎样设置ul的li 居中均匀排列相关的知识，希望对你有一定的参考价值。

我弄菜单栏的时候把ul设置成960px、横向排列，但所有的li都缩在一起，没有在960px之间均匀分开，求高手帮忙解决！（不要设置li的宽度的那种）
<ul >
<li>Home</li>
<li>About Us</li>
<li>Department</li>
<li>Declaration></li>
<li>Services</li>
<li>Apply Link</li>
</ul>
设置margin的话在IE6浏览差别太大

css设置ul的li 居中均匀排列,我们首先需要做的就是将这个ul的width和height确定，使用margin让ul居中，margin的用法如图：

，然后在设置li的width和height，然后给li一个float，通过代码来理解：

<html>

<head>

<style>

width:300px;

height:30px;

border:1px solid #f00;

marign:0 auto;

width:50px;

height:30px;

float:left;

</head>

<body>

<ul>

</ul>

</body>

</html>

参考技术A IE6的margin的bug最好解决了，在浮动后有magin的div里写一句display:inline就可以解决

如果想少出现兼容问题可以使用padding本回答被提问者采纳参考技术B 有几种方法，一，设置最小宽度，二，设置PADDING和MARGIN属性，三，设置宽度成%比。参考技术C <style>

</style>
<div>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Department</li>
<li>Declaration></li>
<li>Services</li>
<li>Apply Link</li>
</ul>
</div> 参考技术D 你适当的设置margin和padding试试

li水平排列居中显示

 <div class="xlk-nav">  
        <ul>  
            <li>菜单11</li>  
            <li>菜单22</li>  
            <li>菜单33</li>  
            <li>菜单44</li>  
            <li>菜单55</li>  
            <li>菜单66</li>  
        </ul>  
    </div>

css:

    * {  
        margin: 0px;  
        padding: 0px;  
    }  
      
    .nav {  
        margin-top: 10px;  
        background: #D9EBF5;  
        text-align: center;  
    }  
      
        .nav ul {  
            padding: 14px 0;  
        }  
      
            .nav ul li {  
                display: inline;  
                background-color:red;  
            }

以上是关于css怎样设置ul的li 居中均匀排列的主要内容，如果未能解决你的问题，请参考以下文章

急!CSS中，怎么让ul li中的图片和文字横向水平居中

怎么设置ul ,li标签元素横排且居中啊？

在css中设置ul样式，li的前面默认会出现黑色圆点，怎样修改圆点的颜色……求解

1、如何用CSS设置ul，使其在div中li靠左对齐？ul有默认的左边距。2、和设置ul的标签样式的大小

css样式给ul还是li