自定義列表槍彈：前

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

爲什麼呢？

顯示：塊可以讓你看到廣場

浮動：左避免發送文本在下一行

保證金右：避免文本太靠近廣場

你必須調整很多，以適應你的風格和情況:)但關鍵的因素是「顯示塊」丟失