Question

我有一个带有2个h1标签的div，当我给它们背景颜色时，由于它们的父级，它们的宽度是相同的，但是我希望它们仅在内容范围内伸展，而不是父级

我也对jQuery解决方案持开放态度。

<div class="text">
    <h1>Zug um zug die weld</h1>
    <h1>Entdecken</h1>
</div>

div.text > h1 {
  background: #447B3A;
  color: #FFFFFF;
  text-transform: uppercase;
}

Answer 1

由于<h1>元素是块elevel，因此默认情况下它们将占用其父元素的整个宽度。您可以通过将它们设置为内联或内联块级别来解决此问题，或者使用以下内容将文本包装在其中：

<div class="text">
     <h1><span>Zug um zug die weld</span></h1>
     <h1><span>Entdecken</span></h1>
</div>
div.text > h1 {
    text-transform: uppercase;
}
div.text >h1 >span {
    background: #447B3A;
    color: #FFFFFF;
}

<强> jsFiddle example

Answer 2

这应该适合你：

div.text > h1 {
    background: #447B3A;
    color: #FFFFFF;
    text-transform: uppercase;
    display: inline-block;
}

Answer 3

使用display: table

Fiddle

div.text > h1 {
    background: #447B3A;
    color: #FFFFFF;
    text-transform: uppercase;
    display: table;
}

Answer 4

如果您想在其他

下方对齐，请应用float:left和clear:both

div.text > h1 {
    background: none repeat scroll 0 0 #447B3A;
    clear: both;
    color: #FFFFFF;
    display: inline-block;
    float: left;
    text-transform: uppercase;
}

Answer 5

div.text > h1 {
  background: #447B3A;
  color: #FFFFFF;
  text-transform: uppercase;
  /* add two more point */
  clear:both;
  float: left;
}

使同一父div内的元素具有其内容的宽度

5 个答案: