阿里前端（方凳）出了道题，有点意思，想了一方案，给大家分享一下：）
预览地址：http://5key.net/demo/liquid-css-title/
要求如下：
- 宽度自适应
- 标题文字自适应
- 尽量用一张背景图
- 尽量少的嵌套
效果嘛，先给出我的截图如下：
以前曾做过一个自适应宽度的圆角按钮。不过这里有两个自适应在里面，所以也得稍微的修改一下。
1、先来看用到的背景图：
2、代码部分：
我是第一
相关文章
标签： css
5key.net
生活,要TMD有激情!
这样做就是有个最大宽度的限制。
[回复]
貌似不错.
[回复]
其实难度不是很高。水平自适应只用一张背景图肯定就是2个容器分别左右嵌套。BTW,圆角里面套圆角，好看吗？
[回复]
其实这也只是一个相对问题。所谓自适应，真正运用到页面中也无非是几种尺寸。只要保证你背景图片的足够宽，相对的自适应是没有问题的。
[回复]
我觉得他们提出的要求比较苛刻，要尽量用一张背景图，又要少用嵌套。
你的解决方法虽然只用了一张背景图，但是HTML用了三层代码嵌套，太多了。
和糟糕的markup结构比起来，我情愿多用背景图。
[回复]
这里只是讨论实现方案，对于视觉效果不做考虑。BTW，图片是取之阿里巴巴
[回复]
其实大部分情况，我只会做一层的自适应。外层由于也是圆角，所以带来了麻烦。
在代码优化与视觉设计上需要找寻一个平衡点，并不是说将所有的问题都推向前端工程师。设计的优化，同样也是代码优化的基础。
[回复]
@5key 自适应的圆角确实是很麻烦，总要造成代码结构的冗余，希望各浏览器能够尽快实现CSS3的圆角属性。
[回复]
嵌套太多 很难理清楚 调试细节也比较繁琐
[回复]
晕，四个嵌套还实现不了无限宽度，你还需要加把劲
[回复]
无限只是一个相对概念。你会需要一个2000px宽度的标题吗？当然，修改一下图片，2000px也没有问题。
对于两层自适应宽度，如果你有更好的办法，我很乐意听听。
[回复]
文字多了会折行，
用white-space:nowrap可以，单firefox，背景不能自动延伸
[回复]
就是计算麻烦了些..
吼吼.
[回复]
test
[回复]
不错的代码，收藏，以后用得着
[回复]
这哥们儿眼熟…
[回复]
现在做圆角，我觉得还是图片比较好一点。简单
[回复]
你的这个自适应不是完全自适应把，还要改title1的width
我把你的图片改成width:874px,其它没变
这是我做的自适应（当然我们讨论的前提都是不超过图片宽度）
自适应标题
我是老三，前面两位是我兄弟，为了长度超过它们，我只好说些废话了-_|||
半夜睡不着觉，把心情哼成歌，只好到屋顶找另一个梦境
这是一个从C移植到D的代码，原文请见“Embed an HTML control in your own window using plain C”，
谢谢 你的blog，会继续关注你的内容，支持一下~
[回复]