Question

如果你看看下面的jsfiddle：

<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

请删除宽度

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果要在新行中显示所有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>

Answer 3

删除＆＃34; .box＆＃34;的宽度会使它工作。但标题总是1行。如果您允许多行标题，也许您可以尝试以下：

＆＃13;

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

＆＃13;

<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>

＆＃13;

宽度不适合多行内联块元素

3 个答案: