宽度不适合如果你看看下面的jsfiddle具有多inline-block的元素

Question

文本：

http://jsfiddle.net/xs5trzxx/

<div class="box"> 
    <h1>This heading</h1> 
    <h1>This is one heading</h1> 
</div> 

.box { 
    width: 350px; 
} 

h1 { 
    display: inline-block; 
    background: url('http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png') no-repeat right top; 
    padding-right: 100px; 
} 

正如你所看到的第一个标题的宽度是文本的宽度和背景图片在文本之后很好地放置。在第二个标题中，虽然标题的宽度不符合文本的宽度，所以背景图像向右浮动。

如何使标题的宽度始终缩小至尽可能小，以便背景图像总是接近文本？

Answer 1

请删除宽度

h1 { 
 
    display: inline-block; 
 
    background: url('http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png') no-repeat right top; 
 
    padding-right: 100px; 
 
}

<div class="box"> 
 
    <h1>This is one heading</h1> 
 
    <h1>This heading</h1> 
 
</div>

如果你想显示在新的行中的所有H1然后添加不同的div标签的所有H1

Answer 2

您可以设置标题，以display: inline;。但是如果你有不止一个（为了防止他们并排坐在一起，这很容易，但不是主题），你还必须清除它们。

.box { 
 
    width: 350px; 
 
} 
 

 

 
h1 { 
 
    display: inline; 
 
    background: url('http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png') no-repeat right top; 
 
    padding-right: 100px; 
 
}

<div class="box"> 
 
    <h1>This is one heading</h1> 
 
</div>

的 “.box的”

Answer 3

删除宽度将使其工作。但标题总是1行。如果允许多行标题，也许你可以试试下面：

.headTxt { 
 
    float:left; 
 
    width: 150px; 
 
    margin:0px; 
 
} 
 

 
.headImg { 
 
    float: left 
 
}

<div> 
 
     <h1 class="headTxt">This is one heading</h1> 
 
     <div class="headImg"><img src='http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png' /></div> 
 
</div>