左边界将不会移动

在步骤10中，垂直边界太靠近'10'了。左边界如何向右移动，以便大'10右边有一些空间'在垂直边界之前？左边界将不会移动

.custom-counter { 
 
    list-style-type: none; 
 
/* list-style-type: decimal !ie; /*IE 7- hack*/ 
 
    margin: 0; 
 
    margin-left: 3.5em; 
 
\t margin-bottom: 20px; 
 
    padding: 0; 
 
     
 
    counter-reset: li-counter; 
 
} 
 

 
.custom-counter > li { 
 
    position: relative; 
 
    margin-bottom: 20px; 
 
    padding-left: 0.5em; 
 
    min-height: 3em; 
 
\t color: #000; 
 
\t font-size: 1.5em; 
 
\t 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>

来源

2017-01-04 MacaronLover

可怕的CSS。看这里 - > https://css-tricks.com/almanac/properties/l/list-style/ – Kinga

只需设置一个margin-left上li标签（如需要），然后改变left属性合适的。像这样：被改变

.custom-counter { 
 
    list-style-type: none; 
 
/* list-style-type: decimal !ie; /*IE 7- hack*/ 
 
    margin: 0; 
 
    margin-left: 3.5em; 
 
\t 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; 
 
\t color: #000; 
 
\t font-size: 1.5em; 
 
\t 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>

来源

2017-01-04 15:45:30 Paul

为什么你要设置额外的风格，硬编码在PX，而不是修改现有的利润和定位？ –

.custom-counter { 
 
    list-style-type: none; 
 
/* list-style-type: decimal !ie; /*IE 7- hack*/ 
 
    margin: 0; 
 
    margin-left: 3.5em; 
 
\t margin-bottom: 20px; 
 
    padding: 0; 
 
     
 
    counter-reset: li-counter; 
 
} 
 

 
.custom-counter > li { 
 
    position: relative; 
 
    margin-bottom: 20px; 
 
    padding-left: 0.5em; 
 
    min-height: 3em; 
 
\t color: #000; 
 
\t font-size: 1.5em; 
 
\t 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柜台>李里::之前。 left from -1em to 1.2em and width from 0.8em to 1.2em so well it up。

来源

2017-01-04 15:56:22 KujAslani

左边界将不会移动

回答

相关问题