标题背后的颜色<h1>带有换行符的填充

时间:2016-08-31 13:42:02

标签: html css html5 css3

我想给<h1>一个背景颜色,并希望它与文本一起扩展,左右相等的填充。

在单线上似乎没问题但是当我打破一条线时,填充物搞砸了。

这是我的代码:

h1 span {
  background: red;
  color: #fff;
  padding: 0 20px;
}
<h1><span>Lorem Ipsum Doler Sai Bongaro</span></h1>
<h1><span>Lorem Ipsum <br>Doler Sai Bongaro</span></h1>

enter image description here

我希望在第二个<h1>

之后,在嘴唇和doler之前的空间

它看起来不应该像一个盒子......

所以看起来像这样:

enter image description here

3 个答案:

答案 0 :(得分:3)

您应该像这样更改HTML:

让我知道是否有帮助

&#13;
&#13;
h1  span{
  background: red;
  color: #fff;
  padding: 0 20px;
  display:inline-block; /*optional */
}
&#13;
<h1><span>Lorem Ipsum Doler Sai Bongaro</span></h1>
<h1><span>Lorem Ipsum </span><br /><span>Doler Sai Bongaro</span></h1>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以使用box-decoration-break(在Firefox中为currently supported),并且在Chrome,Safari和Opera中具有前缀支持。这样,您只需要一个<span>元素。

h1  span{
  background: red;
  color: #fff;
  padding: 0 20px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
<h1><span>Lorem Ipsum <br />Doler Sai Bongaro</span></h1>

答案 2 :(得分:-1)

你只需要添加display:inline-block to span in h1

h1 span {
  background: red;
  color: #fff;
  padding: 0 20px;
  display: inline-block;
}