html - 自定义 ol li 缩进
问题描述
我发现了一些与此问题相关的主题,但没有一个对我有帮助。
ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: my-awesome-counter;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
ol li {
counter-increment: my-awesome-counter;
margin: 1rem 0.25rem;
line-height: normal;
}
ol li:before {
display: inline-block;
content: counter(my-awesome-counter);
width: 40px;
height: 40px;
line-height: 24px;
background: #000;
border-radius: 25px;
color: white;
text-align: center;
margin-right: 0.5rem;
font-size: 24px;
font-weight: 700;
}
我错过了什么?
解决方案
尝试使用position:absolute;
伪元素并padding-left
给予<li>
查看更新的片段:
ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: my-awesome-counter;
/*columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
*/
width: 300px;
}
ol li {
counter-increment: my-awesome-counter;
margin: 1rem 0.25rem;
line-height: normal;
padding-left: 60px;
position: relative;
}
ol li:before {
display: inline-block;
content: counter(my-awesome-counter);
width: 44px;
height: 40px;
line-height: 24px;
background: #000;
border-radius: 25px;
color: white;
text-align: center;
margin-right: 0.5rem;
font-size: 24px;
font-weight: 700;
position: absolute;
left: 0;
}
<ol>
<li> test test test testtest test test testtest test test testtest test test testtest test test testtest test test test</li>
<li> test test test testtest test test testtest test test testtest test test testtest test test testtest test test test</li>
</ol>
推荐阅读
- c - C - 出现错误 *** 检测到堆栈粉碎 ***
- java - 卡片布局 - java GUI
- python - 如果不编码基础值,使用 Enum 会带来什么好处?
- rust - 是 mem::forget(mem::uninitialized()) 定义的行为吗?
- ios - 键盘使用 React 将移动视图上的 div 向上推
- vba - If, Then, 仅粘贴值
- xamarin.forms - 在后台渲染控件
- android - #Button new on click listener
- awk - 使用 awk 限制透明大页面的输出
- html - v-for 用于动态图像网格的 vuejs 中的逻辑