Question

我正在制作自定义样式的有序列表。

我对列表元素进行样式设置，使其包含一个圆圈（border-radius：50％;），其中的数字居中。我将数字定位完美地定位在圆圈（绿色）背景上时遇到了麻烦。如果我向内部元素添加填充，则双位数字偏离中心。是否有解决方案或更好的方法来做到这一点，而且还有响应？

以下是代码链接https://jsfiddle.net/awexkma6/1/

（HTML）

<ol class="custom-counter">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

CSS

.custom-counter {
    list-style-type: none;
    margin-left: 0;
    padding-right: 0;
}
.custom-counter li {
    counter-increment: step-counter;
    position: relative;
    padding: .5em 0 .5em 3em;
    color: #6d6e73;
    border-bottom: .175em solid #e5e5e5;
    margin-bottom: .5em;
}
.custom-counter li:before {
    position: absolute;
    left: 0;
    content: counter(step-counter);
    background-color:green;
    font-weight: bold;
    border-radius: 50%;
    color: white;
    width: 1.5em;
    height: 1.5em;
}

感谢您的帮助。

Answer 1

昨天我回答了一个非常similar question，但我们又来了：

诀窍是添加固定的宽度和高度public class cDescriptions { public string appid { get; set; } public string classid { get; set; } public string instanceid { get; set; } public string icon_url { get; set; } public string icon_url_large { get; set; } public string icon_drag_url { get; set; } public string name { get; set; } public string market_hash_name { get; set; } public string market_name { get; set; } public string name_color { get; set; } public string background_color { get; set; } public string type { get; set; } public int tradable { get; set; } public int marketable { get; set; } public int commodity { get; set; } public string market_fee_app { get; set; } public string market_tradable_restriction { get; set; } public string market_marketable_restriction { get; set; } }，text-align: center等于高度：

line-height

https://jsfiddle.net/awexkma6/2/

Answer 2

为你的css添加一些填充：

enter code here.custom-counter li:before {
    position: absolute;
    left: 0;
    content: counter(step-counter);
    background-color:green;
    font-weight: bold;
    border-radius: 50%;
    color: white;
    width: 1.5em;
    height: 1.5em;
    padding: 7px 0 0 7px;
}

Answer 3

用这个更新你的css风格：

.custom-counter li:before {
    position: absolute;
    left: 0;
    content: counter(step-counter);
    background-color: green;
    border-radius: 50%;
    color: white;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1.5em;
}

这里有更新的小提琴：https://jsfiddle.net/tusharkhatiwada/awexkma6/3/

自定义样式的有序列表以数字为中心

3 个答案: