曾经有几个人问我, 标题与更多之间,怎么样才能把 更多 放到 右边.我的回答是 float:right;可随之而来的是 他告诉我这样不行.会换行..之后就是等等问题.
在这把用过的总结下,只针对 给出的图片.
第一种:
<div class="clear"><h1>深度报道</h1> <a href="#">更多</a></div>
切图为 2px 背景平铺.H放标题前的按钮.
<style>
.clear:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
div {background:url(./img/) 0 0 repeat-x;width:300px;}
h1 {float:left;background:url(./img/) 0 0 no-repeat;}
a {float:right;height:36px;}
</style>
优势:在扩展与重用性强.符合语义化.
缺点:标签有人觉得多了.得清浮动或者触发
第二种:
<h1>深度报道<a href="#">更多</a></h1>
切图为整张.
<style>
h1 {position:relative;background:url(./img/) 0 0 no-repeat;width:300px;}
a {position:absolute;right:0;}
</style>
优势:标签刚够用结构合理,语义也行.
缺点:更多包在H里了,要重新定义其它属性
第三种:
<h1><a href="#">更多</a>深度报道</h1>
切图为整张.
<style>
h1 {background:url(./img/) 0 0 no-repeat;width:300px;}
a {float:right;}
</style>
优势:样式省了.
缺点:更多包在H里了,要重新定义其它属性.这把 更多 放到前面 唉
一些常用总结,有错之处请指正
