HTML + CSS 图像和文本在下一行粘在一起？答案

【问题标题】：HTML + CSS image & text stick together nextline?HTML + CSS 图像和文本在下一行粘在一起？
【发布时间】：2020-08-24 06:13:35
【问题描述】：

如果必须转到下一行，我想让叶子图像和文本粘在一起。

我尝试了很多东西，但不知道怎么做。

提前致谢，

这里是正文的代码：

<div id="ingredients">
    <img style="width: 25px;;padding-right: 1%;" src=" https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Leaf_icon_15.svg/1200px-Leaf_icon_15.svg.png" alt="" />
    <div class="tooltiping" style="color: black;"> Butyrospermum Parkii Butter,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <img style="width: 25px;padding-right: 1%;" src=" https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Leaf_icon_15.svg/1200px-Leaf_icon_15.svg.png" alt="" />
    <div class="tooltiping" style="color: black;"> Zhea Corn Starch,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <img style="width: 25px;padding-right: 1%;" src=" https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Leaf_icon_15.svg/1200px-Leaf_icon_15.svg.png" alt="" />
    <div class="tooltiping" style="color: black;"> Helianthus Annuus Seed Oil,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping" style="color: black;">Sodium Bicarbonate,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
        <img style="width: 25px;padding-right: 1%;" src=" https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Leaf_icon_15.svg/1200px-Leaf_icon_15.svg.png" alt="" />
    <div class="tooltiping" style="color: black; "> Prunus Armeniaca Kernel Oil,&nbsp;s
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping" style="color: black;">Parfum,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping" style="color: black;">Tocopherol,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping" style="color: black;"><i>Geraniol</i>,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping" style="color: black;"><i>Linalool</i>,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping" style="color: black;"><i>Citronellol</i>,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping" style="color: black;"><i>Citral</i>,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping" style="color: black;"><i>Farnesol</i>,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping" style="color: black;"><i>Limonen</i>.
        <span class="tooltiptext">unknown</span>
    </div>
</div>

【问题讨论】：

不能用::before伪元素吗？

标签： html css text alignment

【解决方案1】：

您可以将图像放在 DIV 中，并在图像和第一个字母之间使用不间断的空格：

<div class="tooltiping" style="color: black;"><img style="width: 25px;;padding-right: 1%;" src=" https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Leaf_icon_15.svg/1200px-Leaf_icon_15.svg.png" alt="" />&nbsp;Butyrospermum Parkii Butter,&nbsp;
    <span class="tooltiptext">unknown</span>
</div>

【讨论】：

【解决方案2】：

是的，它有效！我用过：

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

非常感谢

【讨论】：