[英]How can you customize the numbers in an ordered list?
如何左對齊有序列表中的數字？
1. an item
// skip some items for brevity
9. another item
10. notice the 1 is under the 9, and the item contents also line up
這是我在 Firefox 3、Opera 和 Google Chrome 中使用的解決方案。 該列表仍然顯示在 IE7 中（但沒有右括號和左對齊數字）：
ol { counter-reset: item; margin-left: 0; padding-left: 0; } li { display: block; margin-bottom: .5em; margin-left: 2em; } li::before { display: inline-block; content: counter(item) ") "; counter-increment: item; width: 2em; margin-left: -2em; }
<ol> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine<br>Items</li> <li>Ten<br>Items</li> </ol>
編輯：包括 strager 的多行修復
還有一個 CSS 解決方案可以將數字更改為字母/羅馬列表，而不是使用 ol 元素上的 type 屬性。
請參閱list-style-type CSS 屬性。 或者當使用計數器時，第二個參數接受一個列表樣式類型的值。 例如，以下將使用高體羅馬：
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
您還可以在 HTML 中指定您自己的數字 - 例如，如果數字由數據庫提供：
ol { list-style: none; } ol>li:before { content: attr(seq) ". "; }
<ol> <li seq="1">Item one</li> <li seq="20">Item twenty</li> <li seq="300">Item three hundred</li> </ol>
使用與其他答案中給出的方法類似的方法使seq屬性可見。 但是我們沒有使用content: counter(foo) ，而是使用content: attr(seq) 。
從其他答案中竊取了很多內容，但這對我來說在 FF3 中有效。 它有upper-roman 、統一縮進、右括號。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
</body>
</html>
我建議使用 :before 屬性，看看你能用它實現什么。 這將意味着您的代碼確實僅限於不錯的新瀏覽器，並且排除了仍在使用垃圾舊瀏覽器的（令人討厭的大）市場部分，
類似於以下內容，這會強制對項目進行固定。 是的，我知道必須自己選擇寬度不太優雅，但是在布局中使用 CSS 就像卧底警察的工作：無論你的動機多么好，它總是變得凌亂。
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
但是您將不得不進行實驗以找到確切的解決方案。
如果通過將list-style-type設置為向數字添加前導零，數字會更好地排列：
ol { list-style-type: decimal-leading-zero; }
借用並改進了Marcus Downing 的回答。 在 Firefox 3 和 Opera 9 中測試和工作。也支持多行。
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-left: 3.5em; /* Change with margin-left on li:before. Must be -li:before::margin-left + li:before::padding-right. (Causes indention for other lines.) */
}
li:before {
content: counter(item) ")"; /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em; /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example). Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em; /* See li comments. */
}
有類型屬性允許您更改編號樣式，但是，您不能更改數字/字母后的句號。
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
文檔說關於list-style-position : outside
CSS1 沒有指定標記框的精確位置，出於兼容性的原因，CSS2 仍然同樣不明確。 要更精確地控制標記框，請使用標記。
該頁面的進一步是關於標記的內容。
一個例子是：
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
不......只需使用DL：
dl { overflow:hidden; }
dt {
float:left;
clear: left;
width:4em; /* adjust the width; make sure the total of both is 100% */
text-align: right
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
margin: 0 0.5em;
}
我會在這里給出我通常不喜歡閱讀的那種答案，但我認為因為還有其他答案告訴你如何實現你想要的，如果你想要實現的目標是真的，重新思考可能會很好一個好主意。
首先，您應該考慮以非標准方式顯示項目是否是個好主意，使用與提供的分隔符不同的分隔符。
我不知道這樣做的原因，但假設你有充分的理由。
這里提出的實現方法包括向標記添加內容，主要是通過 CSS :before 偽類。 此內容實際上是在修改您的 DOM 結構，將這些項目添加到其中。
當您使用標准的“ol”編號時，您將獲得一個渲染內容，其中“li”文本是可選的，但它前面的數字是不可選的。 也就是說，標准編號系統似乎比實際內容更“裝飾”。 如果您使用例如那些 ":before" 方法為數字添加內容，則此內容將是可選的，因此，會執行不希望的 vopy/paste 問題，或者屏幕閱讀器的可訪問性問題將另外閱讀此“新”內容到標准的數字系統。
也許另一種方法是使用圖像設置數字樣式，盡管這種替代方法會帶來其自身的問題（禁用圖像時不會顯示數字，數字的文本大小不會改變，......）。
無論如何，這個答案的原因不僅僅是提出這種“圖像”替代方案，而是讓人們思考嘗試更改有序列表的標准編號系統的后果。
此代碼使編號樣式與 li 內容的標題相同。
<style>
h4 {font-size: 18px}
ol.list-h4 {counter-reset: item; padding-left:27px}
ol.list-h4 > li {display: block}
ol.list-h4 > li::before {display: block; position:absolute; left:16px; top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
ol.list-h4 > li > h4 {padding-top:3px}
</style>
<ol class="list-h4">
<li>
<h4>...</h4>
<p>...</p>
</li>
<li>...</li>
</ol>
我有。 請嘗試以下操作：
<html>
<head>
<style type='text/css'>
ol { counter-reset: item; }
li { display: block; }
li:before { content: counter(item) ")"; counter-increment: item;
display: inline-block; width: 50px; }
</style>
</head>
<body>
<ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>
</body>
問題是，這肯定不適用於舊的或不兼容的瀏覽器： display: inline-block是一個非常新的屬性。
快速而骯臟的替代解決方案。 您可以將制表符與預先格式化的文本一起使用。 這是一種可能性：
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>
和你的 html：
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>
請注意， li標記和文本開頭之間的空格是制表符（在記事本中按 Tab 鍵時得到的）。
如果您需要支持舊版瀏覽器，可以改為執行以下操作：
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>
從概念的角度來看，其他答案更好。 但是，您可以使用適當數量的“ ”左填充數字使他們排隊。
*注意：起初我沒有意識到正在使用編號列表。 我認為該列表是明確生成的。
你可以在 javascript 中設置有序列表編號的樣式嗎？ 如果是這樣，如何？
[英]Can you style ordered list numbers in javascript? If so, how?
如何在 HTML 的有序列表中使用自定義格式的數字？
[英]How can I have numbers with a custom format in an ordered list in HTML?
如何為有序列表編號執行 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 樣式？
[英]How to do css style for ordered list numbers?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.