57

この質問への答えはノーだと思います...しかし、数字の後にピリオドを付けずに順序付きリストを作成するHTML / CSSの方法を知っている人はいますか？または、代わりに、区切り文字を指定するには？

理想的には、番号ごとに異なるクラスでリストスタイルのイメージを作成したくないのですが、これまでに考えられたのはそれだけです...それはひどく無意味に思えます。

IE：

Default Style:
1. ______
2. ______
3. ______

Desired Style:
1  ______
2  ______
3  ______

Alternate Style:
1) ______
2) ______
3) ______
4

7 に答える 7

85

これはCSS（2.1）だけで完全に可能です。

ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}

このソリューションは：before疑似セレクターに依存しているため、一部の古いブラウザー（特に、IE6およびIE7）は、生成された数値をレンダリングしないことに注意してください。これらのブラウザの場合、通常のリストスタイルを使用するためにそれらだけを対象とするCSSルールを追加する必要があります。

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}
于 2011-05-10T04:51:00.177 に答える
8

これが解決策です

HTMLでネストされた順序付きリストに番号を付ける

ここで少し変更するだけです

ol li:before {
                content: counter(level1) " "; /*Instead of ". " */
                counter-increment: level1;
            }

^^

于 2011-05-10T04:42:05.513 に答える
3

ドットを削除したい場合の回避策を見つけました。これまでで最高のソリューションではありませんが、CSSのみで実行され、すべてのブラウザーで機能します。欠点は、LIのテキストノードを別のタグ（<span>など）にラップする必要があることです。私自身の場合、<ol>はリンクのリストとして使用されていたので、<a>タグを使用できました。

私が使用したCSS：

ol li a {
    float: right;
    margin: 8px 0px 0px -13px; /* collapses <a> and dots */
    padding-left: 10px; /* gives back some space between digit and text beginning */
    position: relative; z-index: 10; /* make the <a> appear ABOVE the dots */
    background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */
}
于 2012-03-16T14:14:12.290 に答える
2

::markerこれは、かなり優れたブラウザサポートを備えたCSS疑似要素を使用して実現できます。

ただし、Safariにはプロパティをサポートするための未解決のバグがあるため、このアプローチはそこでは機能しないことに注意してください。contentフォールバック動作は余分な期間を表示するだけなので、場合によってはこれで問題ないことがあります。

ol { counter-reset: my-counter-name; }

li { counter-increment: my-counter-name; }

li::marker { content: counter(my-counter-name); }
于 2021-07-07T14:39:53.247 に答える
1

後でjQueryを使用して番号を追加できます。

$("ul").each(function() {
   $(this).find("li").each(function(index) {
      $(this)
        .css("list-style-type", "none")
        .prepend("<div class='listnumber'>" + (index + 1) + "</div>");
   })
})

こちらのサンプルをお試しください。

jQueryの詳細については、こちらをご覧ください。

于 2011-05-10T04:37:35.200 に答える
1

上記のソリューションはすべて、一部のリストに欠点があります。複数行のアイテム、複数桁のアイテム番号、カスタムの背景などです。

list-itemカスタムカウンターの代わりに組み込みカウンターを使用する方がクリーンです。

ol.dotless {
  list-style-type: none;
  margin-left: 0;
}
ol.dotless > li:before {
  content: counter(list-item) "\A0";
  float: left;
  text-align: right;
  width: 1.5em;
}

ただし、このアプローチは複数行のアイテムでは機能しません。

カウンターを直接フォーマットできる新しい方法がありますが、これまでのところ、Firefoxでのみ機能します。

ol.dotless {
  list-style: dotless-item
}
@counter-style dotless-item {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: " ";
}

すべての場合に機能する私が遭遇した唯一の方法は、 ：tableを模倣するものです。ol

table.dotlessol {
  margin: 0.25em 1.25em;
  border-spacing: 0;
  counter-reset: dotless;
}
table.dotlessol tr {
  vertical-align: top;
  counter-increment: dotless;
}
table.dotlessol td {
  padding: 0;
}
table.dotlessol td:first-child {
  text-align: right;
  padding-right: 0.5em;
}
table.dotlessol td:first-child::before {
  content: counter(dotless);
}

td各行で2つのsを使用し、最初の行をtd空のままにして、アイテムのテキストを2番目の行に配置しますtd。

于 2020-08-24T10:08:28.733 に答える
0

これは、li内にカウンターインクリメントとインラインタグがない最も簡単なソリューションです。

ol {list-style-position: inside; overflow: hidden; direction: rtl;}
li {position: relative; left: -15px; text-align: left; letter-spacing: 5px;}
于 2019-07-10T19:12:36.457 に答える