首页 > 代码库 > ul li 水平居中

ul li 水平居中

2024-08-22 18:53:04   222人阅读

li的float:left方法显然有一个问题，就是无法居中（水平），只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。使用这种方法主要是利用li的浮动固定宽度来实现，li的默认display为block，将其这个属性改为inline便可实现这种ul li居中的问题。

 

让LI水平居中代码共享CSS如下：
#linknav{height:140px;}
#linknav ul{text-align:center;list-style-type:none;}
#linknav ul li{display:inline;list-style-type:none;}
DIV结构代码如下：
<div id="linknav">
<ul>
<li><a href="http://www.mamicode.com/#">关于我们</a></li>
<li><a href="http://www.mamicode.com/#">域名注册</a></li>
<li><a href="http://www.mamicode.com/#">虚拟主机</a></li>
<li><a href="http://www.mamicode.com/#">企业邮局</a></li>
<li><a href="http://www.mamicode.com/#">网站优化</a></li>
<li><a href="http://www.mamicode.com/#">网站推广</a></li>
</ul>
</div>

 

ul li 水平居中


联系
我们