css中怎么把ul居中


本文摘自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="#">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>

如下图所示:

到此为止实现ul中的li横排显示,并且ul在div里居中显示。

以上就是css中怎么把ul居中的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css样式不生效是怎么回事

css punctuation-trim属性怎么用

css中设置段落缩进的属性是什么

css transition-delay属性怎么用

css如何让滚动条不显示

css flex-shrink属性怎么用

css怎么给按钮加图标

css如何隐藏表格

css 多种背景的使用场景和技巧以及好处

css a怎么去掉下划线

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...