[解決済み】順序付きリストは、cssで1.1, 1.2, 1.3のように見える結果を生成することができますか?
2022-04-03 15:31:50
質問
順序付きリストは、CSSで1.1, 1.2, 1.3 (単なる1, 2, 3, ...ではなく)のような結果を出すことができますか? 今のところ
list-style-type:decimal
は1,2,3だけを生成し、1.1,1.2.,1.3は生成していない。
解決方法は?
を使用することができます。 カウンタ を実行します。
次のスタイルシートは、ネストしたリスト項目に "1"、"1.1"、"1.1.1"などと番号を付けます。
OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, ".") " "; counter-increment: item }
例
ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>
参照 ネストされたカウンタとスコープ をご覧ください。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] How do I style a <select> dropdown with only CSS?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JQuery: 'Uncaught TypeError: ajaxリクエストで「Illegal invocation」が発生する - 複数の要素
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み】ローカルの実行ファイルへのハイパーリンクを作成する方法は?
-
[解決済み] div要素間の空白を削除する方法
-
[解決済み] テーブルセルの背景を透明にする方法
-
[解決済み] CSS - display: none; が機能しない
-
[解決済み] (X)HTMLにおける "PRE "タグの用途は何ですか?
-
[解決済み] Favicon.icoを表示させることができません。
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?
-
[解決済み] TD rowspan が機能しない