如何解决定制的计数器有序列表对齐问题
我有一个简单的有序列表。我使用了counter-reset属性来更改数字的样式。但是问题是,当容器(.list
)的宽度很小时,列表就不会像有序列表那样直接对齐。
.list{
border: 1px solid black;
width: 40%;
Box-sizing: border-Box;
}
ol{
list-style: none;
counter-reset: csscounter;
padding-left: 0.5rem;
}
li{
counter-increment:csscounter;
margin-bottom: 0.25rem;
}
li:before{
content: counter(csscounter);
background: gray;
width: 1.5rem;
height: 1.5rem;
border-radius: 100%;
display: inline-block;
line-height: 1.5rem;
text-align: center;
color: white;
margin-right: 0.5rem;
}
<div class='list'>
<ol>
<li>
Enter your mobile number to view your book collection
</li>
<li>
Select the books that you want to add to your collection
</li>
<li>
Confirm and Submit
</li>
</ol>
</div>
如果我删除<ol>
的css属性,则列表将正确显示,并且不会发生对齐问题。
解决方法
<ul>
具有不同的填充。
问题是您引入了:: before伪元素。您必须重新整理填充物和边距。
.list {
border: 1px solid black;
width: 40%;
box-sizing: border-box;
}
ol {
list-style: none;
counter-reset: csscounter;
padding-left: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
li {
counter-increment: csscounter;
margin-bottom: 0.25rem;
}
li:before {
content: counter(csscounter);
background: gray;
width: 1.5rem;
height: 1.5rem;
border-radius: 100%;
display: inline-block;
line-height: 1.5rem;
text-align: center;
color: white;
margin-left: -1.75rem;
}
<div class="list">
<ol>
<li>
Enter your mobile number to view your book collection
</li>
<li>
Select the books that you want to add to your collection
</li>
<li>
Confirm and Submit
</li>
</ol>
</div>
,
已编辑以避免重复的答案。
您还可以使用,::marker
,padding
,list-style-position
和radial-gradient
背景:
可能的例子
.list {
border: 1px solid black;
width: 250px;
box-sizing: border-box;
}
::marker{color:#ddd;}
li {
list-style-position: inside;
text-indent: -1.5em;
padding: 0.3em 0 0.2em 2em;
background: radial-gradient(
circle at 0.8em 0.9em,gray 0.6em,tomato,transparent 0.75em
);
}
<div class='list'>
<ol>
<li>
Enter your mobile number to view your book collection
</li>
<li>
Select the books that you want to add to your collection
</li>
<li>
Confirm and Submit
</li>
</ol>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。