寬度不適合如果你看看下面的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>