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>上一篇: c++ 中的inline用法
下一篇: do{...}while(0)的妙用
推荐阅读
-
CSS让inline水平元素换行
-
如何用css实现元素水平与垂直居中_html/css_WEB-ITnose
-
CSS 让长字符串超过宽度时自动换行_html/css_WEB-ITnose
-
CSS分层动画可以让元素沿弧形路径运动_html/css_WEB-ITnose
-
【干货】:如何让元素水平排列?_html/css_WEB-ITnose
-
CSS 让长字符串超过宽度时自动换行_html/css_WEB-ITnose
-
怎么让超出div宽度的元素横向滚动?_html/css_WEB-ITnose
-
如何让textarea中的placeholder水平居中?_html/css_WEB-ITnose
-
水平居中--行内元素、定宽块、不定宽块_html/css_WEB-ITnose
-
CSS3实现的div元素水平运动指定距离_html/css_WEB-ITnose