順序付きリストのデフォルトの下位アルファリストタイプは、ドット「。」を使用します。a)... b).. etcのように代わりに右括弧を使用する方法はありますか?
順序付きリストのデフォルトの下位アルファリストタイプは、ドット「。」を使用します。a)... b).. etcのように代わりに右括弧を使用する方法はありますか?
回答:
これがきちんとした解決策です。(正直なところ、これには驚きました。)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>
, lower-alpha
です。したがって、content
値は次のようになりますcounter(list) ") ";
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
text-indent
は、li
レベルに負の値を追加します
これを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; }
背景と位置:絶対にトリックをしました!:)
これは、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;">) </span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number three;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number six;</li>
</ol>
これは電子メール用にコーディングされているためインラインですが、重要な点は、スパンがコンテンツブロックとして機能し、パレンを負の左領域に引き込んでリスト番号と一致させることです。2つのマージンは、IE7とFFの違いを補正するためのものです
お役に立てれば。
display:inline-block;
?