117

番号付きリストの数字を左揃えにするにはどうすればよいですか?

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 で動作する回答に興味があります。

4

17 に答える 17

110

これは、私が 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>

EDIT： stragerによる複数行の修正が含まれています

また、ol 要素で type 属性を使用する代わりに、数字からアルファベット/ローマ字のリストに変更する CSS ソリューションもあります。

list-style-type CSS プロパティを参照してください。または、カウンターを使用する場合、2 番目の引数は list-style-type 値を受け入れます。たとえば、以下はローマ字を使用します。

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */
于 2009-01-28T06:31:49.953 に答える
30

スタイル リストの 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 }
于 2008-08-14T11:01:30.880 に答える
8

他の回答からこれをたくさん盗みましたが、これはFF3で機能しています。upper-roman、均一なインデント、閉じ括弧があります。

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;
}
<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>

于 2009-01-28T15:54:43.423 に答える
6

:before 属性を試してみて、それで何ができるかを確認することをお勧めします。それはあなたのコードが本当に新しいブラウザに限られていることを意味し、古いブラウザをまだ使用している市場の (厄介なほど大きな) セクションを除外します。

次のようなもので、アイテムに固定を強制します。はい、自分で幅を選択しなければならないのはエレガントではありませんが、レイアウトに CSS を使用することは、おとり捜査のようなものです。

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

しかし、正確な解決策を見つけるには実験が必要です。

于 2008-08-18T14:51:27.767 に答える
5

list-style-typeを次のように設定して、数値に先行ゼロを追加すると、数値の整列が向上します。

ol { list-style-type: decimal-leading-zero; }
于 2008-08-24T10:30:06.393 に答える
2

番号付けスタイルを変更できるType 属性がありますが、数字/文字の後のピリオドは変更できません。

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>
于 2008-08-14T11:03:49.830 に答える
1

いいえ... 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;
}
于 2011-11-22T23:45:10.347 に答える
1

ドキュメントは、list-style-position: outside

CSS1 はマーカー ボックスの正確な位置を指定していませんでした。また、互換性の理由から、CSS2 も同様にあいまいなままです。マーカー ボックスをより正確に制御するには、マーカーを使用してください。

そのページのさらに上には、マーカーに関するものがあります。

一例は次のとおりです。

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }
于 2009-01-28T06:53:43.827 に答える
0

ここでは、私が普段読みたくない種類の回答を提供しますが、あなたが望むものを達成する方法を教えてくれる他の回答があるので、あなたが達成しようとしていることが本当に良い考えです。

まず、提供されているものとは異なる区切り文字を使用して、非標準的な方法でアイテムを表示することが良い考えかどうかを考える必要があります。

その理由はわかりませんが、正当な理由があるとしましょう。

ここで提案されている達成方法は、主に CSS :before 疑似クラスを使用して、コンテンツをマークアップに追加することです。このコンテンツは実際に DOM 構造を変更し、それらの項目を追加しています。

標準の "ol" 記数法を使用すると、レンダリングされたコンテンツで "li" テキストが選択可能になりますが、その前の数字は選択できません。つまり、標準の番号付けシステムは、実際のコンテンツよりも「装飾」に近いようです。たとえば、これらの「:before」メソッドを使用して数字のコンテンツを追加すると、このコンテンツが選択可能になり、これにより、望ましくない vopy/paste の問題、またはこの「新しい」コンテンツをさらに読み取るスクリーン リーダーのアクセシビリティの問題が発生します。標準の記数法に。

おそらく別のアプローチとして、画像を使用して数値のスタイルを設定することもできますが、この代替方法には独自の問題があります (画像が無効になっていると数値が表示されない、数値のテキスト サイズが変更されないなど)。

とにかく、この回答の理由は、この「画像」の代替案を提案するだけでなく、順序付きリストの標準的な数え上げシステムを変更しようとした結果について人々に考えさせるためです.

于 2014-02-08T17:10:48.170 に答える
0

迅速で汚れの代替ソリューション。書式設定済みのテキストとともにタブ文字を使用できます。可能性は次のとおりです。

<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は、タブ文字 (メモ帳内でタブ キーを押したときに得られるもの) であることに注意してください。

古いブラウザーをサポートする必要がある場合は、代わりにこれを行うことができます。

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>
于 2009-02-01T17:02:14.400 に答える
-1

他の答えは、概念的な観点からより良いです。ただし、適切な数の「＆ensp;」を使用して数字を左に埋めることができます。それらを整列させるために。

*注：最初は、番号付きリストが使用されていることに気づきませんでした。リストは明示的に生成されていると思いました。

于 2011-11-28T02:44:12.240 に答える
-1

私はそれを持ってます。次のことを試してください。

<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に機能しないことです。これは非常に新しいプロパティです。

于 2009-01-28T14:49:18.687 に答える