自定义列表项目符号:之前

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>

我希望能够像使用自定义列表样式(不是图像)或使用:before选择器一样创建彩色块,就像它们是列表的项目符号一样.基本上,这样的事情:

#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完成这项工作？这不起作用.

这是一个骗局.

Answer 1

稍微调整一下:

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

为什么？

display:block允许你看到方块

float:left避免它在下一行发送文本

margin-right:避免文本太靠近正方形

你必须调整很多以适应你的风格和情况:)但关键因素是缺少"显示块"

Answer 2

我找到了解决方案.显然我有正确的代码,但我需要做的就是添加

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