के साथ कस्टम सूची बुलेट: पहले

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

मैं इसे सीएसएस का उपयोग करके कुछ कैसे पूरा कर सकता हूं? यह काम नहीं कर रहा है। इस पर

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

क्यों?

प्रदर्शन: ब्लॉक आप वर्ग को देखने के लिए

नाव की अनुमति देता है: यह अगली पंक्ति पर पाठ भेजने से बचने के छोड़ दिया

मार्जिन-सही: पाठ भी वर्ग

आप

के निकट होने से बचने अपनी शैली और परिस्थिति में फिट करने के लिए बहुत कुछ ट्विक करना होगा :) लेकिन मुख्य तत्व "डिस्प्ले ब्लॉक" गायब था