没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
2页
比如有如下所示HTMl代码: 复制代码代码如下: <div class=”demo”> <ul> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> </ul> </div> 当做的是水平导航条时,有以下三种办法: 1、对ul使用"text-align: center;"的办法,然后把li转换为inline元素,设置内外边距可以得到效果,代码如下
资源推荐
资源详情
资源评论
浮动后的浮动后的li元素居中实现方法元素居中实现方法
比如有如下所示HTMl代码:
复制代码代码如下:
<div class=”demo”>
<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>
当做的是水平导航条时,有以下三种办法:
1、对ul使用"text-align: center;"的办法,然后把li转换为inline元素,设置内外边距可以得到效果,代码如下:
复制代码代码如下:
* {
margin: 0;
padding: 0;
}
body {
background: #000;
color: #FFF;
font: 12px/1.5 Tahoma,Arial;
}
.demo {
border: 1px solid #CCC;
line-height: 27px;/* 如果有上下边框,必须设置行高使上下边框显示出来,行高无论是继承的还是给定的,计算的结果必须不
小于27px,这里27=15+5+5+1+1,至于字体12px大小,为什么FF查看盒子模型中高为15px,我也不懂,请高人指点迷津 */
margin: 5px auto;
overflow: hidden;
width: 1430px; /* 给包含ul的盒子设置宽度为浏览器窗口的物理宽度(我显示器19寸,差不多1430px宽),发现li的内容仍然
居中,说明无论是是否定宽,li转换成inline元素均可以使li内容居中 */
}
.demo ul {
text-align: center;
margin: 2px 0;/* 让外边框显示出来 */
}
.demo ul li {
border: 1px solid #555;
display: inline;
padding: 5px;
list-style: none;
margin: 10px;/* 转换成inline元素之后,发现上下外边距失效(其实是内陷,可以使用行高调整),这个务必了解 */
}
a {
color: #FFF;
text-decoration: none;
}
a:link, a:visited {}
a:hover {
color: #F60;
}
这里说明一下,为了更直观的展现是否居中,我给.demo这个盒子添加了边框,给每个<li>也添加了边框,实际操作时可能不
需要边框。
这种做法的缺点是上下外边距失效(其实是内陷,可以使用行高调整),必须定义盒子的行高使得上下边框显示出来;而且li
转换成inline元素,不能够再定义宽高。
2、对li使用浮动(通常是"float: left")的办法。但是会发现列表项无法居中显示,它们总是沿浮动的方向对齐。为了解决居中
问题,必须对包含ul的父元素使用padding或对ul使用margin实现:
复制代码代码如下:
.demo ul {
float: left;
text-align: center;
资源评论
weixin_38638033
- 粉丝: 5
- 资源: 940
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功