码迷,mamicode.com
首页 > 其他好文 > 详细

ul宽度自适应让li居中

时间:2015-08-16 19:34:53      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:

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

<!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="http://shenyongxiang.com/">申永祥</a></li>
        <li><a href="http://shenyongxiang.com/">申永祥</a></li>
        <li><a href="http://shenyongxiang.com/">申永祥</a></li>
        <li><a href="http://shenyongxiang.com/">申永祥</a></li>
        <li><a href="http://shenyongxiang.com/">申永祥</a></li>
        <li><a href="http://shenyongxiang.com/">申永祥</a></li>
    </ul>
</div>
</body>
</html>

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

转自:http://shenyongxiang.com/divcss/148.html

如果不浮动li,使li的display为inline-block,ul设置text-align: center,也能达到同样的效果,代码如下:scss

header{
margin-top: 4%;
nav {
ul {
text-align: center;
li {
display: inline-block;
padding: 3.5%;
font-size: 18px;
font-weight: bold;
margin: 0 1px;
}

 

ul宽度自适应让li居中

标签:

原文地址:http://www.cnblogs.com/rocking/p/4734731.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!