而上面加position:
relative
left:
-50%这个可能是写代码的人想让每个标签都向左移动一半的位置,有点像是书页或者纸张层叠的效果,也许可以不用相对定位来处理,可以加例如margin-left:-100px一样可以达到效果,只不过这样需要把li的宽度固定,要不然就效果不太好了
再来说一下让标签居中的样式好了,其实上面加的
有点问题,加了position:
relative
left:
50%就没必要加
float:left
了而且应该是无效的
还有就是position:
relative
left:
50%并不能达到真正居中的效果,因为这样加只是以标签的左边线为中心,实质效果是标签是偏右的,如果非要让标签用position来实现居中的话,那么就应该是下面这种样式,例如:
你把这段标签直接放入body中试试就能看到了,div是绝对处于浏览器的居中位置
不过建议如果你想让标签居中,还是使用常用方法吧margin:0
auto,尽量少用position属性来设定,
css设置ul的li 居中均匀排列,我们首先需要做的就是将这个ul的width和height确定,使用margin让ul居中,margin的用法如图:
,然后在设置li的width和height,然后给li一个float,通过代码来理解:
<html>
<head>
<style>
ul{
width:300px
height:30px
border:1px solid #f00
marign:0 auto
}
li{
width:50px
height:30px
float:left
}
</head>
<body>
<ul>
<li>名字1</li>
<li>名字2</li>
<li>名字3</li>
<li>名字4</li>
</ul>
</body>
</html>
要实现UL标签水平居中,关键在于CSS中 display:inline 的运用。
HTML代码具体示例:
<div id="links">
<ul>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</div>
注意:如果UL没有设置宽度,用margin:0 autl是没有用的,因为它默认了100%,给它一个宽度,实际宽度或者width:auto都可以。
扩展资料:
在HTML中,有两种类型的列表:无序列表 - 列表项标记用特殊图形(如小黑点、小方框等);有序列表 - 列表项的标记有数字或字母。使用CSS,可以列出进一步的样式,并可用图像作列表项标记。
用CSS设置UL标签的列表符号是不需要去设置的,因为ul默认就是标签符号的,如果使用了这个list-style:none;去掉了这个属性,然后又想有的话,就给这个ul一个id或者是class,然后在css中list-style-type:disc !important,这样就又有序号了。
参考资料:UL_百度百科