我们都知道及float:left; 和 float:right;,但是否想过 float:center; 呢?
看下面这段代码:
<div class="fpage">
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</div>
我们想让 .fpage 内的 li 的整个区域浮动居中显示,这里面的 li 数量未知,ul 的宽度也是未知。当然我们可以让给 .fpage 一个 text-align:center; 但这并不是我们的初衷,很多时候我们必须得使用浮动。
这里我们得先重温一下 position:relative; 它将依据 left, right, top, bottom 等属性在正常文档流中偏移位置。那我们可以让 ul 为position:relative;left:50%,然后再让 li 向左浮动,在让它 position:relative;right:50%(或者left:-50%),那么 li 就有了我们想要的居中浮动效果啦!
CSS:
.fpage {
position:relative;
width:100%;
height:80px;
background-color:#eee;
text-align:center;
overflow:hidden;
}
.fpage ul {
float:left;
position:relative;
left:50%;
list-style:none;
}
.fpage ul li {
position:relative;
right:50%;
float:left;
margin:10px;
padding:0 10px;
border:solid 1px #000;
line-height:60px;
}
下载这个实例:[attach=160]
评论 共有 0 条评论
暂无评论,快发表你的评论吧。