Question

在步骤10中，垂直边框太靠近'10'。左边框如何向右移动，以便在垂直边框之前的大'10'右边有一些空间？< / p>

.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>

Answer 1

只需在margin-left代码上设置li（根据需要），然后更改适合的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>

Answer 2

.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: -1.2em;
    width: 1.2em;

    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>

更改的行位于.custom-counter＆gt;内。李前::。离开从-1em到1.2em，宽度从0.8em到1.2em，所以排队很好。< / p>

左边界不会移动

2 个答案: