HTML + CSS изображение и текст слипаются в следующей строке?

Question

Я бы хотел, чтобы изображение листа и текст слипались, если нужно go до следующей строки.

Я много чего пробовал, но могу ' t выяснить, как.

Заранее спасибо,

Вот код текста:

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

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

Answer 2

Да, работает! Я использовал:

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

большое спасибо