Erstellen einen CSS-Rahmen um benutzerdefiniert li Kugel

Question

Ich versuche, herauszufinden, ob es möglich ist, einen CSS-Rahmen um ein Bild aufzunehmen ich als benutzerdefinierte Kugel importiert für meine li:

ul { 
 
    list-style: none; 
 
    margin-right: 0; 
 
    padding-left: 0; 
 
    list-style-position: inside; 
 
} 
 

 
ul > li { 
 
    align-content: center; 
 
    display: flex; 
 
    margin: 5px 0; 
 
    padding-left: 1em; 
 
    text-indent: -1em; 
 
} 
 

 
ul li:before { 
 
    /* I'm a different image but found a similar 
 
    sized one online for demonstration 
 
    purposes seen below */ 
 
    
 
    content: url("https://www.dicentral.com/css/assets/imgs/Flag_Nation_france.png"); 
 
    border: 1px solid grey; 
 
}

<ul> 
 
    <li>Get to know the business</li> 
 
    <li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li> 
 
    <li>Learn how the team's priorities impact our mission</li> 
 
    <li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li> 
 
</ul>

Die Ergebnisse im Editor für eingebetteten Code spiegeln das Bild wieder, das ich verwende.

Dies ist die gewünschte Ausgabe:

Irgendwelche Ideen? Ich denke leider, dass ich das Symbol mit Rand importieren muss, aber sehe, ob ich ohne es schaffen kann.

Danke!

Answer 1

Ja, es ist ganz einfach zu tun, bitte unten einen Blick auf das Beispiel. Du machst einfach ein bisschen was durcheinander.

Sie haben align-content anstelle von align-items, die die Positionierung der Linie falsch macht. text-indent führt zu falschem Offset. Ich habe diese kleinen Probleme entfernt.

über Bild selbst - ich habe em als Beispiel verwendet, da von Emojis, aber für Bild wird es besser sein px zu verwenden und neu zu berechnen, Werte, die derzeit als em definiert ist.

ul { 
 
    margin-right: 0; 
 
    padding-left: 0; 
 
    list-style: none; 
 
} 
 

 
ul > li { 
 
    align-items: center; 
 
    display: flex; 
 
    margin: 5px 0; 
 
} 
 

 
ul li:before { 
 
    /* I'm using the url method to fetch an icon, but 
 
    inserted a emoji for demonstration 
 
    purposes seen below */ 
 

 
    /*content: url("path/to/icon");*/ 
 
    content: ''; 
 
    border: 1px solid #808080; 
 
    border-radius: 100%; 
 
    width: 1em; 
 
    height: 1em; 
 
    display: inline-block; 
 
    padding: 0.25em; 
 
    line-height: 1.0; 
 
    margin-right: 0.5em; 
 
}

<ul> 
 
    <li>Get to know the business</li> 
 
    <li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li> 
 
    <li>Learn how the team's priorities impact our mission</li> 
 
    <li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li> 
 
</ul>

Answer 2

Sie sollten "display: flex" entfernen ul> li

ul { 
    list-style: none; 
    margin-right: 0; 
    padding-left: 0; 
} 

ul > li { 
    align-items: center; 
    display: flex; 
    margin: 5px 0; 

} 

ul li:before { 
    /* I'm using the url method to fetch an icon, but 
    inserted a emoji for demonstration 
    purposes seen below */ 

    content: ''; 


border: 1px solid #808080; 
    border-radius: 100%; 
    width: 1em; 
    height: 1em; 
    display: inline-block; 
    padding: 0.25em; 
    line-height: 1.0; 
    margin-right: 0.5em; 
} 

Answer 3

gibt es viele Möglichkeiten Ergebnis zu erzielen.

1) Verwenden Sie Bild mit abgerundeten Rahmen als Hintergrund auf "li". Der Hintergrund sollte nicht wiederholt werden, links zentriert und einige Padding-links auf li.

2) Geben Sie Höhe, Breite, Inline-Block und Border-Radius zu li: vor.