当前日期时间
当前时间:
网站标志
Logo
全站搜索
广告位
phpweb图片广告
广告位
phpweb图片广告
自定内容

phpweb已经是国内最强的的开源电子商务系统了,但并非完美,因为任何...

互联网3年一轮回,京东凡客等电商品牌在三年之前也不过是小打小闹,而如...

电商已经成为趋势,传统行业的竞争已经逐渐演变到网络上,也有不少用Weboss...

phpweb系统是固定的模式,适用于大部分行业与需求。但有一些行业还是有自己...

当前位置
文章正文

phpweb成品网站css 关于ul在div里居中且平铺的问题

发表:管理员  发表时间:2013-07-30 13:54:51   阅读:(1158)次  

phpweb成品网站css 关于ul在div里居中且平铺的问题

今天在调整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>

显示的效果应该是这样子的 ::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::0

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> 如下图所示: ::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::1

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> 如下图所示: ::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::

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

脚注信息
© 2005-2015 草莓互联(100cm.cn) 广州同福信息科技有限公司 版权所有,并保留所有权利。

广州市东莞庄一横路116号 粤ICP备11046216号-7

经营性网站备案信息 广州网络警察报警平台 不良信息举报中心  百度信誉档案 广州工商红盾网 可信网站认证