Danh sách Tuỳ chỉnh Bullets với: trước

Question

tôi là tạo ra một hình thức trong đó có các phần sau:

cách tiếp cận của tôi cho các hoạt động và đối tượng phần là tạo ra những tùy chọn sử dụng một danh sách.

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

Tôi muốn để có thể tạo ra các khối màu như thể họ là những viên đạn của danh sách, hoặc sử dụng một tùy chỉnh list-style (không phải hình ảnh), hoặc bằng cách sử dụng: trước khi chọn. Về cơ bản, một cái gì đó như thế này:

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

Tôi có thể thực hiện điều gì đó bằng cách sử dụng CSS? Điều này không hoạt động.

HERE'S A FIDDLE.

Answer 1

Tôi đã tìm ra giải pháp. Rõ ràng tôi đã có mã đúng, nhưng tất cả những gì cần làm là thêm

display:inline-block; 

Sau đây là đúng:

.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

tinh chỉnh về vấn đề này một chút:

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

tại sao?

display: block cho phép bạn xem các hình vuông

float: left tránh nó gửi các văn bản trên dòng tiếp theo

margin-right: tránh văn bản quá gần quảng trường

bạn phải chỉnh sửa rất nhiều để phù hợp với phong cách và tình huống của bạn :) nhưng yếu tố chính là "khối hiển thị" bị thiếu