欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS让inline水平元素换行

程序员文章站 2024-03-23 13:58:46
...

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>