今天一个朋友问到我一个关于界面的问题，虽然看上去很简单，但是如果仔细思考，发现“同样一道问题，答案可以有很多不同”。废话少说，我们来看题目：
提问是：上图中，BLOG和后面的白色横线是如何做到白色横线随着前面的字数增加而缩短的。
如果不认真审题，就会觉得只需要一个简单的-margin就可以实现了。但是我们再仔细看Blog这个单词时，就会发现它的背景更整个网页的背景是连在一起的，也就是说Blog这个词的背景是透明的。
我想到了最简单的方案，这里和大家分享：
这样，我们就用一张图做出了演示。这个方案的核心包括：① 最外层的out-container固定宽度，将超出宽度的内容隐藏 ② 再inner-container中使用两个float块来存放词汇和横线。当词汇字母增加时，横线就会被往后挤，但超出out-container宽度的部分却被隐藏。
当然，这种方案的后果就是多了一层container，显得框架臃肿。我们可以使用CSS3的文本布局“弹性框模型”来实现，不过理解起来就复杂很多。如果你还有新的想法，不妨在下方留言，和我们一起分享。
