樣式有序列表多行對齊

Question

我正在使用CSS計數器樣式OL。

.custom-ol { 
 
    margin-left: 0; 
 
    padding-right: 0; 
 
    list-style-type: none; 
 
} 
 
.custom-ol li { 
 
    counter-increment: step-counter; 
 
} 
 
.custom-ol li::before { 
 
    content: counter(step-counter); 
 
    margin-right: 5px; 
 
    font-size: 80%; 
 
    background-color: rgb(200, 200, 200); 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: 5px 8px; 
 
    border-radius: 10px; 
 
    line-height: 26px; 
 
}

<ol class="custom-ol"> 
 
    <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</li> 
 
    <li>Blah Blah Blah</li> 
 
    <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah</li> 
 
    <li>Blah Blah</li> 
 
</ol>

本身工作正常的造型，但是我遇到了造型問題的情況時，列表項比父容器寬度更長：在li的第二個字符串環繞li::before元素，而比與第一個字符串處於相同的水平。

如何使其像一個普通的ol項目將採取行動？

我試圖將margin-bottom屬性添加到li::before但它沒有做任何事情來獲得正確的對齊方式。

Answer 1

將一些text-indent應用於.custom-ol li，可能具有負值。

閱讀this舉例。

Answer 2

一種方法是將僞元素相對於包含li的元素絕對定位。這將需要ol左側的一些margin或padding爲僞元素留出空間。

.custom-ol { 
 
    margin-left: 0; 
 
    padding-left: 40px; /*Add this*/ 
 
    padding-right: 0; 
 
    list-style-type: none; 
 
} 
 
.custom-ol li { 
 
    counter-increment: step-counter; 
 
    line-height: 26px; /*Move line-height to here*/ 
 
    position: relative; /*Add this*/ 
 
} 
 
.custom-ol li::before { 
 
    content: counter(step-counter); 
 
    margin-right: 5px; 
 
    font-size: 80%; 
 
    background-color: rgb(200, 200, 200); 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: 5px 8px; 
 
    border-radius: 10px; 
 
    line-height: 1em; /*Reset the line-height set on the li*/ 
 
    position: absolute; /*Add this*/ 
 
    right: 100%; /*Add this*/ 
 
    top: 0; /*Add this*/ 
 
}

<ol class="custom-ol"> 
 
    <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</li> 
 
    <li>Blah Blah Blah</li> 
 
    <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah</li> 
 
    <li>Blah Blah</li> 
 
</ol>

Answer 3

貴麗::之前essentailly內嵌的內容，儘量給它一定的空間，坐進去的保證金（或線的填充，以創建上慄一個空間，允許形成一塊長方形的文字，你可以做那麼::之前，只要你喜歡（浮動，內聯，絕對定位塊等）的位置

嘗試如這樣：

.custom-ol { 
 
    margin-left: 0; 
 
    padding-right: 0; 
 
    list-style-type: none; 
 
} 
 
.custom-ol li { 
 
    counter-increment: step-counter; 
 
    margin-left: 3em; 
 
    position:relative; 
 
    min-height: 1.8em; 
 
    
 
} 
 
.custom-ol li::before { 
 
    content: counter(step-counter); 
 
    font-size: 80%; 
 
    background-color: rgb(200,200,200); 
 
    color: white; 
 
    font-weight: bold; 
 
    width: 1.5em; 
 
    height:1.5em; 
 
    border-radius: 0.75em; 
 
    line-height: 1.5em; 
 
    text-align: center; 
 
    display: block; 
 
    position: absolute; 
 
    left:-2.5em; 
 
}

<ol class="custom-ol"> 
 
    <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </li> 
 
    <li>Blah Blah Blah </li> 
 
    <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah </li> 
 
    <li>Blah Blah </li> 
 
    </ol>

這使得:: 1.5em直徑的圓之前，並對其定位外面的保證金創建黎族本身。李還給出了一個最小高度，以確保::之前的元素不重疊或觸摸。