左邊界將不會移動

在步驟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

左邊界將不會移動

回答

相關問題