Как выровнять значки с элементами списка в CSS

#html #css

#HTML #css

Вопрос:

Как мне разместить значки (изображения) на левом поле списка?

Вот пример в HTML

 <ul>
    <li>
        <img class="icon" src="https://via.placeholder.com/40x30.png/f60"/>
        <img class="icon" src="https://via.placeholder.com/40x30.png/ff0"/>
        Some text
    </li> 
    
    <li>
        <img class="icon" src="https://via.placeholder.com/40x30.png/ff0"/>
        Some other text
    </li> 
</ul>

и CSS

 body {
        margin-left: 200px;
}

.icon {
    display: inline-block;
    position:relative;
    left: -80px;
}

Тот же пример в живой демонстрации https://www.codeply.com/p/R2rUeDHoVC

Вот что я хочу

Вот что у меня есть so fa (изображения создают нежелательные пробелы в тексте и скрывают маркеры списка).

Если на элемент приходится несколько маркеров, группа изображений if должна увеличиваться влево (все изображения должны быть выровнены по правому краю).

Я пробовал различные настройки для отображения, положения, гибкости и т. Д., Но почему-то не могу найти правильную комбинацию.

Ответ №1:

Мое решение зависит от ограниченного количества значков (изображений), но его можно улучшить.

РЕДАКТИРОВАТЬ: я отредактировал ответ, чтобы сохранить маркеры.

 body {
        margin-left: 200px;
}

li {
    position: relative;
    height: 35px;
}

li .icon {
    position: absolute;
    display: inline-block;
    left: -65px;
}

li .icon:nth-child(2) {
    position: absolute;
    display: inline-block;
    left: -110px;
}

li .icon:nth-child(3) {
    position: absolute;
    display: inline-block;
    left: -160px;
}

li .icon:nth-child(4) {
    position: absolute;
    display: inline-block;
    left: -210px;
}

 <ul>
    <li>
        <img class="icon" src="https://via.placeholder.com/40x30.png/f60"/>
        <img class="icon" src="https://via.placeholder.com/40x30.png/ff0"/>
        Some text
    </li> 
    
    <li>
        <img class="icon" src="https://via.placeholder.com/40x30.png/ff0"/>
        Some other text
    </li> 
    
    <li>
        <img class="icon" src="https://via.placeholder.com/40x30.png/f60"/>
        And even more text
    </li>
</ul>

Развернуть фрагмент

1. Я хотел сохранить маркеры списка, поскольку могут быть элементы, которые не оформлены. Похоже, что модификация ответа Озгура решает проблему. Возможно, есть более элегантное решение с помощью селектора ::before, предложенного DCR.

2. @DavidL Я отредактировал свой ответ, чтобы сохранить маркеры.

Ответ №2:

Вот решение, основанное на ответе Озгура, но с сохранением маркеров списка. Тот же пример кода доступен на https://www.codeply.com/p/r036MF41Fp

 body {
    margin-left: 200px;
    background: #fff;
}
    
li {
    position: relative;
}
    
li .icon {
    position: absolute;
    display: inline-block;
    left: -60px;
}
    
li .icon:nth-child(2) {
    position: absolute;
    display: inline-block;
    left: -105px;
}

li .icon:nth-child(3) {
    position: absolute;
    display: inline-block;
    left: -150px;
}

li .icon:nth-child(4) {
    position: absolute;
    display: inline-block;
    left: -195px;
}

 <ul>
<li>
<img class="icon" src="https://via.placeholder.com/40x30.png/f60"/>
<img class="icon" src="https://via.placeholder.com/40x30.png/ff0"/>
Some text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lectus id quam iaculis condimentum. Aenean venenatis nec felis at dictum. Nullam vitae rhoncus est.
</li> 

<li>
<img class="icon" src="https://via.placeholder.com/40x30.png/f60"/>
Some text 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lectus id quam iaculis condimentum. Aenean venenatis nec felis at dictum. Nullam vitae rhoncus est.
</li> 

<li>
Some text 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lectus id quam iaculis condimentum. Aenean venenatis nec felis at dictum. Nullam vitae rhoncus est.
</li>

<li>
<img class="icon" src="https://via.placeholder.com/40x30.png/f60"/>
<img class="icon" src="https://via.placeholder.com/40x30.png/ff0"/>
<img class="icon" src="https://via.placeholder.com/40x30.png/660"/>
<img class="icon" src="https://via.placeholder.com/40x30.png/6f0"/>

Some text 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lectus id quam iaculis condimentum. Aenean venenatis nec felis at dictum. Nullam vitae rhoncus est.
</li>           

</ul>

Развернуть фрагмент