背景颜色多个文本背后的div

时间:2013-08-06 00:23:41

标签: html css html5 css3

我正试图在文字后面加上背景色。我会有这样的多个元素。

我遇到的当前问题是,为了使背景颜色“适合”文本,我使用'display:inline'属性。但问题是,对于下一个元素,我需要它显示在一个新行上,而不是在同一行上。

目前情况如何:

http://i.imgur.com/jLVRfwk.png

我需要它:

http://i.imgur.com/dXyXNSa.png

这是我开始的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;
}

请帮忙。

4 个答案:

答案 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,它具有与内联块相同的收缩包装属性,但强制元素显示在各自的行上。

http://jsfiddle.net/KFYyd/5/

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