私はそれは私が私の李さんのカスタム弾丸としてインポート画像の周囲にCSSの境界線を組み込むことが可能かどう把握しようとしているカスタムのli弾丸

Question

周りのCSSの境界線を作成：

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>

埋め込みコードエディタの結果は、私が使用しているイメージのものと同じです。

これは、所望の出力です：

任意のアイデア？私は残念ながら私は国境を持ってアイコンをインポートする必要があるかもしれないと思っていますが、私がなくても管理できるかどうか見ています。

ありがとうございます！あなたが「表示：フレックス」を削除してください

Answer 1

はい、行うことは非常に簡単ですが、以下の例を見てみてください。あなたはちょっと物事を台無しにする。

align-itemsの代わりにalign-contentがあり、行の位置が正しくありません。 text-indentは誤ったオフセットになります。私はこれらの小さな問題を削除しました。画像自体について

- 私はので、絵文字の例としてemを使用しましたが、イメージのためにpxを使用して、現在emのように定義されている値を再計算する方がよいでしょう。

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

ULから>李

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

は結果を達成するために多くの方法があります。

1） "li"の背景に丸みのある縁を持つ画像を使用します。バックグラウンドは、左にノーリピートで、いくつかのパディングはリオンに残す必要があります。

2）li：beforeに高さ、幅、インラインブロック、ボーダー半径を指定します。