在第 10 步中,垂直边框太靠近“10”了。如何将左边框向右移动,以便在垂直边框之前的大“10”右侧有一些空间?
.custom-counter {
list-style-type: none;
/* list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 3.5em;
margin-bottom: 20px;
padding: 0;
counter-reset: li-counter;
}
.custom-counter > li {
position: relative;
margin-bottom: 20px;
padding-left: 0.5em;
min-height: 3em;
color: #000;
font-size: 1.5em;
line-height: 1.5;
border-left: 2px solid #000;
}
.custom-counter > li::before {
position: absolute;
top: 0;
left: -1em;
width: 0.8em;
font-size: 2.5em;
line-height: 1;
font-weight: bold;
text-align: center;
color: #000;
content: counter(li-counter);
counter-increment: li-counter;
}
<ol class="custom-counter">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
<li>Step 8</li>
<li>Step 9</li>
<li>Step 10</li>
</ol>
最佳答案
只需在 li
标签上设置一个 margin-left
(根据需要),然后适本地更改 left
属性。像这样:
.custom-counter {
list-style-type: none;
/* list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 3.5em;
margin-bottom: 20px;
padding: 0;
counter-reset: li-counter;
}
.custom-counter > li {
position: relative;
margin-left:20px;
margin-bottom: 20px;
padding-left: 0.5em;
min-height: 3em;
color: #000;
font-size: 1.5em;
line-height: 1.5;
border-left: 2px solid #000;
}
.custom-counter > li::before {
position: absolute;
top: 0;
left: -1.2em;
width: 1em;
font-size: 2.5em;
line-height: 1;
font-weight: bold;
text-align: center;
color: #000;
content: counter(li-counter);
counter-increment: li-counter;
}
<ol class="custom-counter">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
<li>Step 8</li>
<li>Step 9</li>
<li>Step 10</li>
</ol>
关于html - 左边框不会移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41467697/