Question

你好我想弄清楚这个帖子How to use CSS to surround a number with a circle?中提出的问题同样的问题

然而 - 每当我这样做时，无论我是否增加宽度/高度，形状都会变成椭圆形......

我在这里创建了一个jsfiddle http://jsfiddle.net/dDuFv/

<ul class="numberCircle">
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
</ul>

CSS

.numberCircle { list-style-type:none; font-size:18px; }
.numberCircle li { margin:20px;}
.numberCircle li:before {
    border-radius:100%;
    counter-increment: section;
    content:counter(section);
    background: #f1562c;
    color:#fff;
    padding:2px;
    border:none;
    text-align: center;
}

但它只是不起作用！

感谢您的帮助！

Answer 1

将display:inline-block;赋予伪类。它应该工作。

写：

.numberCircle li:before {
    width:20px;
    display:inline-block;
}

Updated fiddle here.

绕圈：在元素之前

1 个答案: