В пределах диапазона, ограничьте размер фонового изображения от спрайта

Question

В раскрывающемся списке есть список элементов.

В начале каждой строки есть зарезервированное дополнение для отображения фонового изображения в качестве ведущего значка. Изображение из длинного вертикального изображения спрайта значков. Теперь проблема в том, что строка с длинным текстом будет перенесена в следующую строку, а так как высота увеличена, в области значков отображается значок внизу.

Вопрос, не меняя структуру html, есть в любом случае, чтобы отображать один значок в каждой строке независимо от высоты линии? Большое спасибо!

HTML:

<ul> 
    <li> 
    <a class="deactivate"> 
     <span>Deactivate the service</span> 
    </a> 
    </li> 

    <li> 
    <a class="edit"> 
     <span>Edit </span> 
    </a> 
    </li> 

    <li> 
    <a class="delete"> 
     <span>Delete</span> 
    </a> 
    </li> 

</ul> 

CSS:

ul { 
    width: 100px; 
    overflow: hidden; 
    line-hight: 1.25; 
} 

li { 
    list-style: none; 
    margin-bottom:10px; 
} 

a { 
    text-align: left; 
    cursor: pointer; 
    padding: 5px 5px 3px; 
} 

a > span { 
    padding: 2px 0 2px 20px; 
    display: inline-block; 
    background-image: url(http://cpqa.catchpoint.com/HawkUI/App_Themes/NewUI/images/icons/ico-db-sprite.png); 
    background-repeat: no-repeat; 
    font-size: 12px; 
} 

a.deactivate > span { 
    background-position: -2px -382px; 
    background-repeat: no-repeat; 

} 

a.delete > span { 
    background-repeat: no-repeat; 
    background-position: -2px -322px; 
} 

a.edit > span { 
    background-repeat: no-repeat; 
    background-position: -2px -362px; 
} 

https://jsfiddle.net/zcdbLLfw/

Answer 1

Вы можете использовать псевдо-элемент, как этот

ul { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    line-height: 1.25; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    margin-bottom:10px; 
 
} 
 

 
a { 
 
    text-align: left; 
 
    cursor: pointer; 
 
    padding: 5px 5px 3px; 
 
} 
 

 
a > span { 
 
    padding: 2px 0 2px 20px; 
 
    display: inline-block; 
 
    font-size: 12px; 
 
    vertical-align: top; 
 
} 
 
a > span:before { 
 
    content: ' '; 
 
    display: inline-block; 
 
    height: 18px; 
 
    width: 20px; 
 
    background-image: url(http://cpqa.catchpoint.com/HawkUI/App_Themes/NewUI/images/icons/ico-db-sprite.png); 
 
    background-repeat: no-repeat; 
 
    vertical-align: top; 
 
} 
 

 
a.deactivate > span:before { 
 
    background-position: -2px -382px; 
 
} 
 

 
a.delete > span:before { 
 
    background-position: -2px -322px; 
 
} 
 

 
a.edit > span:before { 
 
    background-position: -2px -362px; 
 
}

<ul> 
 
    <li> 
 
    <a class="deactivate"> 
 
     <span>Deactivate the service</span> 
 
    </a> 
 
    </li> 
 

 
    <li> 
 
    <a class="edit"> 
 
     <span>Edit </span> 
 
    </a> 
 
    </li> 
 

 
    <li> 
 
    <a class="delete"> 
 
     <span>Delete</span> 
 
    </a> 
 
    </li> 
 

 
</ul>

---

Обновление на основе комментариев

Если вы хотите работать в существующем фоне, вам придется увеличить пространство между каждым элементом в вашем png, чтобы компенсировать дополнительную линию или 2, ... или вам нужно второе изображение/фоновый цвет, чтобы покрыть то же самое.

В любом случае псевдоэлемент будет делать это лучше, полностью масштабируемым, независимо от количества строк, которые имеет элемент.

Ну, вы могли бы также установить фиксированную высоту на вашем пролетом (height: 16px;), как этот

ul { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    line-hight: 1.25; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    margin-bottom:10px; 
 
} 
 

 
a { 
 
    text-align: left; 
 
    cursor: pointer; 
 
    padding: 5px 5px 3px; 
 
} 
 

 
a > span { 
 
    padding: 2px 0 2px 20px; 
 
    height: 16px; 
 
    display: inline-block; 
 
    background-image: url(http://cpqa.catchpoint.com/HawkUI/App_Themes/NewUI/images/icons/ico-db-sprite.png); 
 
    background-repeat: no-repeat; 
 
    font-size: 12px; 
 
} 
 

 
a.deactivate > span { 
 
    background-position: -2px -382px; 
 
    background-repeat: no-repeat; 
 

 
} 
 

 
a.delete > span { 
 
    background-repeat: no-repeat; 
 
    background-position: -2px -322px; 
 
} 
 

 
a.edit > span { 
 
    background-repeat: no-repeat; 
 
    background-position: -2px -362px; 
 
}

<ul> 
 
    <li> 
 
    <a class="deactivate"> 
 
     <span>Deactivate the service</span> 
 
    </a> 
 
    </li> 
 

 
    <li> 
 
    <a class="edit"> 
 
     <span>Edit </span> 
 
    </a> 
 
    </li> 
 

 
    <li> 
 
    <a class="delete"> 
 
     <span>Delete</span> 
 
    </a> 
 
    </li> 
 

 
</ul>