一道前端布局面试题引发的思考

昨天520加上锤子发布会，相信各位园丁都没太休息好，其实我也是，有个问题想了又想。。。

经历过一次面试，题目是这样的刚发布，我们就来一锤

如何只用一层HTML标签做出这个效果，主体宽度不是固定的哦，文字也不是固定字数的，如果可以再套一层标签相信大家应该很轻易的解决。

当时楼主考虑到兼容性方面是没答上来，回来后想了想也没想到好的办法做到完全兼容，现在做出了如下两套方案都是不兼容IE6和7的（利用伪类，不用JS来兼容IE6和7）：

1.

<div class="text"></div>

.text{ position:relative; text-align:center;}
.text:before{ content:"来个锤子"; background:#FFF;}
.text:after{ content:""; position:absolute; left:0; top:8px; width:100%; height:1px; z-index:-1; background:#CCC;}

2.

<div class="text1"></div>

.text1{ text-align:center; line-height:0; border-top:1px solid #CCC;}
.text1:before{ content:"再来一锤"; background:#FFF;}

其中第二种line-height为0决定了line boxes的高度为0，但是它是以文字的水平中垂线对称分布的。这个重要的特性可以用来实现文字或图片的垂直居中对齐。

不知道大家有没好的实现方法，不管是文字一开始写在标签里还是没写在标签里

<div class="text"></div>

<div class="text">锤子呢</div>

求各位不吝指教，先在此谢过了