Beschränken Sie innerhalb eines Bereichs die Hintergrundbildgröße von einem Sprite.

Question

Es gibt eine Liste von Elementen als Dropdown-Liste.

Am Anfang jeder Zeile ist das Padding für das Hintergrundbild reserviert, das als führendes Symbol angezeigt wird. Das Bild stammt von einem langen vertikalen Bildsymbol. Jetzt ist das Problem, dass eine Zeile mit langem Text in die nächste Zeile eingeschlossen wird, und da die Höhe erhöht wird, wird im Symbolbereich das darunterliegende Symbol angezeigt.

Meine Frage ist, ohne die Struktur des HTML zu ändern, gibt es trotzdem ein Symbol in jeder Zeile anzuzeigen, egal, die Höhe der Zeile ist? Danke vielmals!

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

Sie Pseudo-Element wie dieses

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>

verwenden können

---

aktualisieren basierend auf Kommentare

Wenn Sie es in der bestehenden Hintergrund arbeiten wollen, müssen Sie den Abstand zwischen den einzelnen Element in Ihrem png bilden für eine zusätzliche Linie erhöhen müssen oder 2, ... oder du brauchst eine zweite Bild-/Hintergrundfarbe, um dasselbe zu bedecken.

So oder so, ein Pseudo-Element wird dies besser tun, vollständig skalierbar, unabhängig von der Anzahl der Zeilen, die ein Element hat.

Nun, könnten Sie setzen auch eine feste Höhe auf Ihrer Spanne (height: 16px;), wie diese

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>