我有一个无序列表,其中使用FontAwesome创建项目符号,一些背景和边框半径。
我希望第二行文字在第一行之下,而不是在子弹之下。
li::before {
display: table-cell;
padding-right: .3em;
content: "\f00c";
float: left;
margin: 0 9px 0 0;
font: 10px 'FontAwesome';
width: 20px;
height: 20px;
position: relative;
background: #3498db;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
line-height: 20px;
color: #FFF;
}
不知怎的float: left
似乎"冲突"与display: table-cell
。
有关如何使其发挥作用的任何想法? - > jsfiddle
答案 0 :(得分:3)
position:absolute
使用:before
,padding-left
使用<li>
li {
position:relative;
padding-left:32px;
}
li::before{
position:absolute;
top:0;
left:0;
}
答案 1 :(得分:0)
对position:absolute
使用:before
,padding-left
使用<li>
,但不要使用left
或top
。改为使用边距。