내 목록 스타일을 올바르게 작성하는 방법은 무엇입니까?

Question

나는 HTML에서 목록을 만들었지 만, 대신에 기본 총알의 내가 확인 표시와 함께 투표함을 원했다, 그래서 일부 CSS 추가 :

ul { 
 
    list-style: none; 
 
} 
 
li::before { 
 
    content: "\2611"; 
 
}

<ul> 
 
    <li>Long text</li> 
 
    <li>Long text</li> 
 
    <li>Long long text</li> 
 
</ul>

을 그리고 모든 것이 거의 완벽하지만 때 <li> s의 텍스트는 최소한 두 줄을 사용하고 두 번째 줄은 공백없이 시작합니다.

간단히 말해서 새 줄의 첫 번째 글자는 글 머리 기호 아래에 있지 않고 이전 줄의 첫 번째 글자 아래에 있어야합니다.

나는 그것을하는 방법을 전혀 모른다.

Answer 1

li 텍스트 삽입 및 패딩을 조정하여 필요한 경우 사용자 지정 내용을 정렬 할 수 있습니다.

ul { list-style: none; } 
 

 
li { text-indent: -20px; margin: 10px 0;} 
 

 

 
li::before { content: "\2611"; color: #a00; padding-right: 5px; }

<ul> 
 
<li>Long text</li> 
 
<li>Long text</li> 
 
<li>Long long text Long long text Long long text Long long text Long long text Long long text </li> 
 
<li>Long text</li> 
 
<li>Long long text Long long text Long long text Long long text Long long text Long long text </li> 
 
<li>Long text</li> 
 
</ul>

Answer 2

사용자 지정 이미지를 목록 스타일로 추가 할 수 있습니다. 그것은 간격 문제의 경우에도 적용됩니다.

ul { 
    list-style-image: url('customimage.gif'); 
} 

자세한 내용은 here을 참조하십시오.