右括弧付きの順序付きリスト(HTML)の下位アルファ?


82

順序付きリストのデフォルトの下位アルファリストタイプは、ドット「。」を使用します。a)... b).. etcのように代わりに右括弧を使用する方法はありますか?


3
たぶん、答えの1つを正しいものとして選ぶことができますか?...
Takit Isy 2018

回答:


162

これがきちんとした解決策です。(正直なところ、これには驚きました。)CSSにはカウンターと呼ばれるものがあり、たとえば、各見出しに自動章番号を設定できます。少し変更を加えると、次のようになります。パディングなどは自分で整理する必要があります。

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}
<span>custom list style type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

最新のすべてのブラウザとIE9 +(およびおそらくIE8ですが、バグがある可能性があります)で動作します。

更新:ネストされたリストが親スタイルを取得しないように、子セレクターを追加しました。trejderはまた、リスト項目の配置もめちゃくちゃになっているというコメントの良い点を示しています。456bereastreet記事には、カウンターを絶対に配置するという優れた解決策があります。

ol {
    counter-reset: list;
}
ol > li {
    list-style: none;
    position: relative;
}
ol > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}
<span>custom list style type (v2):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

これは、ネストされたリストを含む結果を示すjsFiddleです。


1
そうです、これはIE6では機能しません。しかし、Firefox3.5.3で動作するのは朗報です。
mouviciel 2009年

1
実際には、次の場合に適しています。ol{counter-reset:list; }複数のolがある場合、元の1つは機能しません。
jfly 2012

1
参考までに、アルファベット順ではなく番号付きリストを取得するには、を削除するだけ, lower-alphaです。したがって、content値は次のようになりますcounter(list) ") ";
Trevan Hetzel 2013

1
これは100%実際の番号付けではないことを付け加えておきます。複数行のアイテムの違いを確認できます。では、通常のリスト(標準箇条書きまたは番号を使用して)各ラインは同じインデントを持っているので、テキストのブロックの前に立つような箇条書きまたは番号ルックス。上記の解決策では、次の各行は番号の下から始まり、わずかにはめ込まれていません。これは事実を変えるものではありません、これは本当に素晴らしい解決策です!:>
trejder 2014年

プラス:これはマルチレベルリストでは完全に失敗します(私の例はjsFiddleです)。
trejder 2014年

11

DisgruntledGoatの回答に基づいて、必要に応じてサブリストとスタイルをサポートするように拡張しました。それが誰かを助ける場合に備えて、ここでそれを共有します。

https://jsfiddle.net/0a8992b9/出力:

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha

1
+1アルファのリセットを行いました。それは私を大いに助けました。どうもありがとう。;:誰かがアルファクラスを持っていない場合、彼は[スタイル* = "低アルファのlist-style-タイプ"]オールを使用することができます
SKを。

箇条書きの代わりに使用される文字の右側にテキストを残したまま、これを行う方法はありますか?つまり、テキストを文字の下に折り返すのではなく(a))、通常の<li>のように、特定の文字ポイントのテキストが始まるポイントに折り返します
sabliao 2017

@sabliaotext-indentは、liレベルに負の値を追加します
Tyler

3

これをCSSに追加すると、いくつかの興味深い結果が得られました。近かったが、葉巻はなかった。

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

-----コメントにIazelのソリューションを含めるように編集しました-----

私はあなたの解決策を完成させました:

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

背景とposition: absoluteトリックをしました!


私はあなたの解決策を完成させました:li { position: relative; } li:before { display: inline-block; width: 7px; position: absolute; left: -12px; content: ')'; background-color: #FFF; text-align: center; } 背景と位置:絶対にトリックをしました!:)
Iazel 2013

-9

これは、IE7、FF3.6、Opera 9.64、およびChrome6.0.4で機能します。

<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
</ol>

これは電子メール用にコーディングされているためインラインですが、重要な点は、スパンがコンテンツブロックとして機能し、パレンを負の左領域に引き込んでリスト番号と一致させることです。2つのマージンは、IE7とFFの違いを補正するためのものです

お役に立てれば。


1
そんなはずじゃないのdisplay:inline-block;
JaredMcAteer 2012

自動生成された「a」、「b」などの文字の横にパレンを配置しようとすると、フォントサイズに依存するため、これはハックです。このようなことを行う場合は、単にパレンをレンダリングするのではなく、list-style-type:noneを使用して、「a)」全体のレンダリングを自分で引き継ぐ必要があります。
チャールズケンドリック
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.