本文摘自PHP中文网,作者anonymity,侵删。
今天在调整ul居中的问题时,遇到了点小困难,以前在使用ul时候,让其不是垂直的排列而是,横着排列都是使用float:left这个属性,但是呢,今天我在弄一些友情链接的时候,就出现了ul在div中居中不了的问题,就是在div中加入了style=“text-align:center;” ul也不居中,最后仔细对比了网上的,发现时用了float:left的原因,首先平铺,可以对ul的style使用display:inline,而不必使用float属性,这样之后在div上就可以使用style=“text-align:center;” 使ul列表居中显示了。1、假设最初的的代码是这样:
1 2 3 4 5 6 7 8 9 | < div id = "links" style = "border:1px solid red;" >
< ul >
< li >< a href = "#" >link111111</ a ></ li >
< li >< a href = "#" >link2222</ a ></ li >
< li >< a href = "#" >link33333</ a ></ li >
< li >< a href = "#" >link44444</ a ></ li >
< li >< a href = "#" >link555555</ a ></ li >
</ ul >
</ div >
|
2、去除列表前面的黑点(在ul的style中使用list-style-type:none;)
1 2 3 4 5 6 7 8 9 | < div id = "links" >
< ul style = "border:1px solid red;list-style-type:none;" >
< li >< a href = "#" >link111111</ a ></ li >
< li >< a href = "#" >link2222</ a ></ li >
< li >< a href = "#" >link33333</ a ></ li
<li>< a href = "#" >link44444</ a ></ li >
< li >< a href = "#" >link555555</ a ></ li >
</ ul >
</ div >
|
如下图所示:
3、使li横排显示并且ul位于div的中间位置,(li使用style="display:inline;"),如下所示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style type= "text/css" >
#links { text-align : center ;}
#links ul{ border : 1px solid red ; list-style-type : none ;}
#links ul li{
display : inline ;
}
</style>
<div id= "links" >
<ul>
<li><a href= "#" >link 111111 </a></li>
<li><a href= "#" >link 2222 </a></li>
<li><a href= "#" >link 33333 </a></li
<li><a href= "#" >link 44444 </a></li>
<li><a href= "#" >link 555555 </a></li>
</ul>
</div>
|
如下图所示:
到此为止实现ul中的li横排显示,并且ul在div里居中显示。
以上就是css中怎么把ul居中的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css样式不生效是怎么回事
css punctuation-trim属性怎么用
css中设置段落缩进的属性是什么
css transition-delay属性怎么用
css如何让滚动条不显示
css flex-shrink属性怎么用
css怎么给按钮加图标
css如何隐藏表格
css 多种背景的使用场景和技巧以及好处
css a怎么去掉下划线
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css中怎么把ul居中