我正试图在文字后面加上背景色。我会有这样的多个元素。
我遇到的当前问题是,为了使背景颜色“适合”文本,我使用'display:inline'属性。但问题是,对于下一个元素,我需要它显示在一个新行上,而不是在同一行上。
目前情况如何:
我需要它:
这是我开始的JSFiddle:http://jsfiddle.net/KFYyd/5/
HTML:
<div class="text">This is text.</div>
<div class="text">This is text.</div>
CSS:
.text {
display: inline;
background: black;
color: white;
padding: 5px;
}
请帮忙。
答案 0 :(得分:2)
将div显示为内联块并在它们之间添加换行符。
HTML:
<div class="text">This is text.</div><br>
<div class="text">This is text.</div>
CSS:
.text {
display: inline-block;
background: black;
color: white;
padding: 5px;
margin-bottom: 5px;
}
答案 1 :(得分:2)
使用display: table
,它具有与内联块相同的收缩包装属性,但强制元素显示在各自的行上。
body {
margin: 10px;
}
.text {
display: table;
background: black;
color: white;
padding: 5px;
}
与使用浮动不同,您不必担心清除,这有时会导致布局问题。
答案 2 :(得分:1)
只需浮动div并清除两者
.text {
float:left;
clear:both;
display: block;
background: black;
color: white;
padding: 5px;
margin:5px;
}
答案 3 :(得分:0)
添加clearfix以清除浮动后的浮动。这在元素水平堆叠的情况下很有用。
HTML:
<div class="text">This is text.</div>
<div class="clearfix"></div>
<div class="text">This is text.</div>
CSS:
.text {
display: inline;
background: black;
color: white;
padding: 5px;
margin: 5px;
}
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
一旦了解了正在发生的事情,就使用该方法。
Read more about float - by Chris Coyer