申永祥学习室

ul宽度自适应让li居中

SEO > 网站建设 > DivCss > 申永祥 发布于 2015年10月17日 | 阅读(4698)

在div中ul不知道宽度的情况下,让li和内容居中,在做网站时,列表分页用的就是ul列表,但ul是不能给定义宽度的,应该分页数是随着内容变化的,这样的话,要让分页总是显示在中间部位,就不能再用常用的margin或是text-align这些居中的属性了,下面是这段可以让ul没有宽度的情况下,就可以居中的代码。

ul宽度自适应让li居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ul宽度自适应让li居中</title>
<style type="text/css">
<!--
ul,li{padding:0px;margin:0px; list-style:none;}
.syx{width:765px;height:50px;background:#F2F2F2;margin:0 auto;text-align:center;overflow:hidden;}
.syx ul{float:left;position:relative;left:50%;}
.syx ul li{float:left;position:relative;right:50%;margin:3px;display:block;border:1px #BCBCB0 solid;background:#149D0D;line-height:29px;}
.syx ul li a{display:block;padding:5px;color:#000000;text-decoration:none;}
.syx li a:hover{border:1px solid #333;display:block;width:86px;}
-->
</style>
</head>
<body>
<div class="syx">
    <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>
        <li><a href="/">申永祥</a></li>
    </ul>
</div>
</body>
</html>

DIVCSS的ul宽度自适应让li居中内容比较适合与分页数字、导航栏目等,可以让内容的增加而不改版页面的样式。

转载请注明来源:申永祥博客,(QQ:2320500181)原文地址:http://www.shenyongxiang.com/divcss/148.html

声明:博客内容除标记原创字样以外内容,均来自网络转载,版权归原作者所有,如涉及版权问题请及时联系处理。

上一篇:ie6,ie7,ie8,FF火狐浏览器兼容性解决方法 下一篇:没有了