前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

CSS让inline水平元素换行

css3

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水平元素换行