CSS让inline水平元素换行

1.例子

提问：

你喜欢我哪一点？

回答：

我喜欢你滚远一点！

2.排版结构如下：

<dl>
    <dt>提问：</dt><dd>你喜欢我哪一点？</dd>
    <dt>回答：</dt><dd>我喜欢你滚远一点！</dd>
</dl>

a.或许你会浮动的css:

dt { float: left; }
dd { margin-left: 0; }

但是，浮动这东西是个魔鬼，破坏流体布局，易抽风。实际上，在有些浏览器默认基线对齐，文字下沉了：

b.或话你会用display: run-in

dt { display: run-in; }
dd { margin-left: 0; }

经测试上面css，IE8以上均支持，ie7以下及其他除Safari均不支持，

c.借助Unicode字符，CSS实现换行

dd:after {
    content: '\A';
    white-space: pre;
}

使用了after伪类，因此上面方法支持的浏览器为IE8 ，以及其他靠谱浏览器。经过自己的测试，content内容只能是"\A"或者需要包括"\A"，大小写无妨。

有可能dd元素不止一个,可改进：

dt:before {
    content: '\D\A';
    white-space: pre;
}
dt:first-child:before { content: normal; }

转载请注明：前端录»CSS让inline水平元素换行

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=16-88-2"></script>