我想創建一個訂單列表如下所示款式樣圖像：如何將列表項目和列表內容與空間對齊？

我已經嘗試了一些方法，用下面的代碼：

body { 
    padding: 20px; 
} 

ol { 
    list-style-type: upper-roman; 
    list-style-position: inside; 
} 
ol li { 
    position: relative; 
} 
ol li span { 
    position: absolute; 
    left: 30px; 
}

它看起來像我想要的風格。然而，當內容包，就會一起崩潰：

有什麼辦法解決呢？

這是我用來演示的鏈接：

Demo code

來源

2017-10-14 PJCHENder

指https://stackoverflow.com/questions/10428720/how-to-keep-indent-for-second-line-in-ordered-lists-via-css – davidchoo12

願意使用javascript？ –

@ChrisHappy javascript也願意。不過，我認爲這是風格。因此，純粹的CSS（如果能達到目的）更爲可取。 – PJCHENder

CSS定製counter：

我會建議做這個使用專用CSS counter，因爲它是專門爲這類情況下，你需要一個自定義的前瞻性計數器。

另外，正如您所看到的，HTML更簡單，並且不需要在每個li項目內包裝span。

ol { 
 
    counter-reset: list; 
 
    list-style:none; 
 
} 
 

 
ol li { 
 
    position: relative; 
 
    padding-left: 40px; 
 
} 
 

 
ol li::before { 
 
    position: absolute; 
 
    left: 0; 
 
    counter-increment: list; 
 
    content: counter(list, upper-roman)'.'; 
 
}

<ol> 
 
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, excepturi!</li> 
 
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat provident impedit id? Enim nihil aperiam modi? Laudantium vel maiores consequatur?</li> 
 
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis illum natus impedit non ea animi?</li> 
 
    <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime consequuntur ea doloremque voluptatum, temporibus optio quis. Adipisci libero numquam laboriosam.</li> 
 
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, magnam!.</li> 
 
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, qui?</li> 
 
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem cum consectetur qui enim optio delectus.</li> 
 
</ol>

來源

2017-10-14 08:08:15 vsync

嘗試list-style-position: inside;

body { 
 
    padding: 20px; 
 
} 
 

 
ol { 
 
    list-style-type: upper-roman; 
 
    list-style-position: inside; 
 
} 
 

 
ol li { 
 
    position: relative; 
 
    list-style-position: outside; 
 
    padding-left: 5px; 
 
} 
 

 
ol li span { 
 
    position: relative; 
 
}

<ol> 
 
    <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, excepturi!</span></li> 
 
    <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat provident impedit id? Enim nihil aperiam modi? Laudantium vel maiores consequatur? 
 
      </span></li> 
 
    <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis illum natus impedit non ea animi?</span></li> 
 
    <li><span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime consequuntur ea doloremque voluptatum, temporibus optio quis. Adipisci libero numquam laboriosam.</span></li> 
 
    <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, magnam!.</span></li> 
 
    <li><span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, qui?</span></li> 
 
    <li><span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem cum consectetur qui enim optio delectus. 
 
      </span></li> 
 
</ol>

來源

2017-10-14 07:28:39 codesayan

「list-style-position：outside;」在ol裏將使列表項目在右側而不是在左側對齊。在將「list-style-position：outside」註釋掉之後，我不知道如何在列表項和列表內容之間添加空格。 – PJCHENder

使用div代替span，並改變你的CSS像下面

body { 
 
    padding: 20px; 
 
} 
 

 
ol { 
 
    list-style-type: upper-roman; 
 
    list-style-position: inside; 
 
    display: initial; 
 
} 
 
ol li div { 
 
    padding-left: 40px; 
 
    margin-top: -19px; 
 
}

<ol> 
 
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, excepturi!</div></li> 
 
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat provident impedit id? Enim nihil aperiam modi? Laudantium vel maiores consequatur? 
 
      </div></li> 
 
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis illum natus impedit non ea animi?</div></li> 
 
    <li><div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime consequuntur ea doloremque voluptatum, temporibus optio quis. Adipisci libero numquam laboriosam.</div></li> 
 
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, magnam!.</div></li> 
 
    <li><div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, qui?</div></li> 
 
    <li><div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem cum consectetur qui enim optio delectus. 
 
      </div></li> 
 
</ol>

來源

2017-10-14 07:29:18 C2486

哦，你做到了！太好了！ –

如何將列表項目和列表內容與空間對齊？

回答

CSS定製counter：

相關問題