Bullets Lista niestandardowa z: przed

Question

Tworzę postać, która ma następującą sekcję:

Moje podejście do działań i obiektów sekcje było stworzenie te opcje za pomocą listy.

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

Chciałbym, aby móc tworzyć kolorowe bloki, jak gdyby były pociski z listy, albo przy użyciu niestandardowych list-style (nie zdjęcia), lub za pomocą: przed selektora. Zasadniczo coś takiego:

#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; 
} 

Jak mogę coś osiągnąć za pomocą CSS? To nie działa.

HERE'S A FIDDLE.

Answer 1

Wymyśliłem rozwiązanie. Widocznie miałem prawidłowy kod, ale wszystko, co potrzebne do zrobienia było dodać

display:inline-block; 

Poniżej poprawna:

.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

wariację na ten temat nieco:

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

dlaczego?

display: block pozwala zobaczyć kwadrat

pływak: left unikać jej wysłaniem tekstu w następnym wierszu

margin-right: unikać tych tekstów jest zbyt blisko placu

ci musiałem dużo poprawić, aby pasowało do twojego stylu i sytuacji :) ale kluczowym elementem był brak "bloku wyświetlacza".