順序付きリスト内の数値をカスタマイズするにはどうすればよいでしょうか?

https://stackoverflow.com/questions/10877

08-06-2019
|

質問

順序付きリスト内の数値を左揃えにするにはどうすればよいですか?

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 ソリューションはありますか。

参照するリストスタイルタイプ CSS プロパティ。または、カウンターを使用する場合、2 番目の引数は list-style-type 値を受け入れます。たとえば、次の場合は大文字ローマ字を使用します。

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */

他のヒント

スタイルリストの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>
  <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):

ol {
  list-style: none;
}

ol > li:before {
  content: attr(seq) ". ";
}

より多くのスタイルを備えた CodePen でのデモ

他の回答から多くのことを盗みましたが、これは私にとって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;
}

ただし、正確な解決策を見つけるには実験する必要があります。

設定により、数字の先頭にゼロを追加すると、数字の並びが良くなります。リストスタイルタイプに：

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. */
}

そこにはタイプ属性これにより、番号付けスタイルを変更できますが、数字/文字の後のピリオドは変更できません。

<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 タグであり、テキストの先頭は表文字 (メモ帳内でタブキーを押すと表示される文字) です。

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

<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」メソッドを使用して番号のコンテンツを追加すると、このコンテンツが選択可能になり、これにより、望ましくないコピー/ペーストの問題が実行されたり、この「新しい」コンテンツをさらに読み込むスクリーンリーダーのアクセシビリティの問題が発生したりします。標準の記数法に。

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

とにかく、この答えの理由は、この「画像」の代替案を提案するだけでなく、順序付きリストの標準の数値体系を変更しようとする結果について人々に考えさせることです。

このコードは、番号付けスタイルを 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>

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow