番号付きリストの番号を左揃えにするにはどうすればよいですか？
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番号付きリストの番号の後の文字を変更しますか？
1) an itemまた、ol要素でtype属性を使用する代わりに、数字からアルファベット/ローマ数字のリストに変更するためのCSSソリューションがあります。
私は主にFirefox 3で動作する回答に興味があります。
回答:
これは私が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による複数行の修正が含まれています
また、ol要素でtype属性を使用する代わりに、数字からアルファベット/ローマ数字のリストに変更するためのCSSソリューションがあります。
list-style-type CSSプロパティを参照してください。または、カウンターを使用する場合、2番目の引数はリストスタイルタイプの値を受け入れます。たとえば、次は大文字のローマ字を使用します。
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}。
リストをスタイリングするためのCSSはこちらですが、基本的には次のとおりです。
li {
list-style-type: decimal;
list-style-position: inside;
}しかし、特定のは、あなたが後にしているおそらく唯一のようなもので、レイアウトの内臓掘り下げることによって達成することができるレイアウトこの（私は実際にそれを試していないことに注意してください）：
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; 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)。
value="4A"。さらに、value属性はこのtype属性で機能しますが、valueは数値である必要があります（順序付きセット内で機能するため）。
reversed属性はHTML5のみ、として使用されているvalueのをli）。代わりに、あなたの使用してのseqIを設定valueし、使用attr(value)の代わりに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; }マーカスダウニングの回答を借用および改善しました。テスト済みで、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. */
}そこには Type属性しかし、あなたが数字/文字の後にピリオドを変更することはできません、あなたは番号のスタイルを変更することができます。
<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;
}私はそれを持ってます。以下を試してください：
<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>ここでは、通常は読みたくない種類の答えを示しますが、やりたいことを達成する方法を示す他の答えがあるので、達成しようとしているものが本当にあるかどうかを再考するのは良いことだと思います良い考えです。
最初に、提供されているものとは異なるセパレータ文字を使用して、非標準的な方法でアイテムを表示することが適切かどうかを検討する必要があります。
その理由はわかりませんが、正当な理由があるとしましょう。
ここでは、主に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>