我正在创建一个包含以下部分的表单:
我对“活动和对象”部分的方法是使用列表创建这些选项。
<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完成此操作?这不起作用。
答案 0 :(得分:13)
稍微调整一下:
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:避免文字太靠近正方形
你必须调整很多以适合你的风格和情况:)但关键因素是缺少“显示块”
答案 1 :(得分:5)
我找到了解决方案。显然我有正确的代码,但我需要做的就是添加
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;
}