旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css中怎样把ul居中【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:84


导读:本日在调解ul居中的题目时,碰到了点小难题,之前在运用ul时刻,让其不是垂直的分列而是,横着分列都是运用float:left这个属性,然则呢,本日我在弄一些友情链接的时刻,就涌现了...
本日在调解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、假定最初的的代码是如许:

<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;)

<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;"),以下所示

<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居中的细致内容,更多请关注ki4网别的相干文章!

标签:css