사용자 정의 리튬 총알 주위에 CSS의 테두리를 만드는 나는 그것이 내 리튬의에 대한 사용자 정의 총알로 가져 오기 이미지 주위에 CSS의 경계를 통합 할 수 있는지 알아 내려고 노력하고있어

Question

:

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에 높이, 너비, 인라인 블록 및 경계선 반경을 지정합니다.