사용자 지정 목록의 글 머리 기호 :

Question

전에 다음과 같은 섹션이있는 양식을 만드는거야 :

내 접근법 활동을하고 섹션 목록을 사용하여 해당 옵션을 만드는 것이 었습니다 개체.

<div class="formBlock"> 
    Activities 
    <ul id="coloringAct"> 
     <li>Activity Type A</li> 
     <li>Activity Type B</li> 
     <li>Activity Type C</li> 
    </ul> 
</div> 

나는 그들이리스트의 총알이었다 중 하나를 사용자 지정 목록 스타일 (안 이미지)를 사용 또는 사용하는 경우 같은 색깔의 블록을 만들 수 있도록하고 싶습니다

: 선택하기 전에. 기본적으로 다음과 같은 내용이 있습니다 :

#formTable tr td .formBlock li { 
    list-style:none; 
    margin:0; 
    padding:0; 
    border-top:1px solid #DDD; 
} 
#formTable tr td .formBlock li:before { 
    content: ""; 
    width:20px; 
    height:20px; 
    background:red; 
} 

CSS를 사용하여 어떻게하면됩니까? 이것은 작동하지 않습니다. 이에

HERE'S A FIDDLE.

Answer 1

솔루션을 찾았습니다. 분명히 나는 ​​올바른 코드를했지만, 내가 할하는 데 필요한 모든 다음

display:inline-block; 

가 올바른지 추가했다 :

.formBlock { 
     float:left; 
     background-color:#f5f5f5; 
     padding:0px 10px 0px 10px; 
     color:#627686; 
     line-height:32px; 
     overflow:hidden; 
     width:150px; 
     border-radius:5px; 
     margin-right:15px; 
    } 
    .formBlock li { 
     list-style:none; 
     margin:0; 
     padding:0; 
     border-top:1px solid #DDD; 
    } 
    .formBlock li:before { 
     display:inline-block;   
     content: ""; 
     width:10px; 
     height:10px; 
     background:red;  
     margin-right:5px;    
    }​ 

Answer 2

팅겨 조금 :

formTable tr td .formBlock li:before { 
    content: ""; 
    width:20px; 
    height:20px; 
    background:red; 
    display: block; 
    float: left; 
    margin-right: 5px; 
} 

이유는 무엇입니까?

디스플레이 : 블록은

플로트 광장을 볼 수 있습니다 : 그것은 다음 줄에 텍스트 전송을 방지 왼쪽

마진 오른쪽 : 텍스트 광장

당신에게 너무 가까이있는을 피하기 당신의 스타일과 상황에 맞추기 위해 많은 것을 조정해야만합니다.하지만 중요한 요소는 "디스플레이 블록"이 누락되었습니다.