0%

CSS display inline 研究(多个div在一个段落显示)

问题

有一堆 div,不想一行一行显示,想在一个段落里显示,这个好像叫流式布局?代码如下

1
2
3
4
5
6
7
8
<div class="list">
<div class="text">这是第一句话</div>
<div class="text">这是第二句话</div>
<div class="text">这是第二句话</div>
<div class="text">这是第二句话</div>
<div class="text">这是第二句话</div>
<div class="text">这是第二句话</div>
</div>
1
2
3
.text {
display: inline;
}

后来还发现 display: inline; 下面的 margin 会失效,可以用 line-height 来解决这个问题。