§ ITPOW >> 文档 >> CSS

不用 float:left 制作标题栏“更多”的方法

作者：vkvi 来源：ITPOW（原创）日期：2010-3-8

如下效果：

标题栏

在最初，大家可能是用一个表格，两个单元格，一个单元格放名称，一个单元格放“更多”的链接。

后来 CSS 发展起来了，像这种就不用表格了，通过 float:left 的方法来让两个元素居在一行。

但我认为还有更方便的方法，那就是用 position:relative。

HTML 代码

CSS 代码

p
{
    margin:0px;
    padding:0px;
}
.title
{
    width:300px;
    height:30px;
    overflow:hidden; /*避免 IE 中，head 被撑高而无法收回*/
    line-height:30px;
    font-size:15px;
    border:1px solid red;
}
.more
{
    position:relative;
    top:-30px;
    left:250px;
}

CSS 代码中，为 p 设置样式主要是消除不同浏览器对其 margin、padding 的不同解释。

本来 more 是在 name 的下面，现在通过 position:relative，再加上 top:-30px，让其向上走 30px，使之和 name 在同一水平线上。再 left 让其右移。效果就实现了。

要说明一下为什么要给 title 加上 overflow:hidden 呢？这是因为在 IE 中，more 把 title 撑高了，虽然 more 后来离开了最初的位置，但 title 已经无法再缩回，所以加上 overflow:hidden，让 title 不被撑高。