18

注文リストがあり、特定のアイテムから出力された番号をスキップしたいのですが。

従来の出力：

1. List item
2. List item
3. List item
4. List item
5. List item

必要な出力：

1. List item
2. List item
   Skipped list item
3. List item
4. List item
5. List item

これはCSSで達成できますか？<ol>以前は知らなかった「開始」属性を発見しましたが、役に立たないようです。

4

5 に答える 5

30

最も簡単な方法は、スキップするアイテムからリストマーカーを削除し、value属性を使用して次のアイテムの番号を設定することです（HTML5では非推奨/廃止されません）。例：

<ol>
<li>List item
<li>List item
<li style="list-style-type: none">List item
<li value=3>List item
<li>List item
</ol>
于 2012-10-12T13:25:24.590 に答える
18

別のオプションは、CSS3カウンターを使用することです：デモ

HTML

<ul>
<li>One</li>
<li>Two</li>
<li class="skip">Skip</li>
<li>Three</li>
<li>Four</li>
</ul>​

CSS

ul {
    counter-reset:yourCounter;
}
ul li:not(.skip) {
    counter-increment:yourCounter;
    list-style:none;
}
ul li:not(.skip):before {
    content:counter(yourCounter) ".";
}
ul li.skip:before {
    content:"\a0\a0\a0"; /* some white-space... optional */
}
于 2012-10-12T11:38:46.187 に答える
3

今ではとても簡単です。

スキップされたリストアイテムに.skipが使用されているクラス.skipに以下を追加するだけです。

ol li.skip {
    list-style-type:none;
    counter-increment:none;
}

HTMLでは次のようになります。

<ol>
  <li>first list item</li>
  <li class="skip">2nd list item</li>
  <li>third list item</li>
</ol>

その結果：

  1. 最初のリストアイテム
    2番目のリストアイテム
  2. 3番目のリスト項目
于 2016-10-21T10:15:46.567 に答える
1

これは私の解決策（CSSのみ）であり、ol（順序付きリスト）からli（リストアイテム）の通常の使用法を維持することができます。つまり、すべてのliアイテムに一貫性があり、隣接するアイテムと同じものを表していないアイテムはありません。

すぐ下のコード：

 .term-and-condition li {
    position: relative;
  }
  .term-and-condition ol ol {
    list-style-type: lower-latin;
  }
  .term-and-condition h2 {
    position: absolute;
    top: -2.4em;
    left: -1.5em;
  }
  .term-and-condition h3 {
    position: absolute;
    top: -2.4em;
    left: -1.5em;
  }
  .term-and-condition h2 + *,
  .term-and-condition h3 + * {
    margin-top: 4em;
  }
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Skip ordered list item numbering</title>
  </head>
  <body>
    <article class="term-and-condition">
      <h1>Participants agree to be bound by these Terms and Conditions</h1>
      <ol>
        <li>
          <h2>The Promoter</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
        </li>

        <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li> 

        <li>
          <h2>Eligibility</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
        </li>

        <li>
          <h2>Entry</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
        </li>

        <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li>

        <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li>

        <li>
          <p>Entrants must upload an image and text that:</p>
          <ol>
            <li><p>Lorem ipsum dolor sit amet, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere</p></li>
            <li><p>consectetur adipisicing elit. Veritatis dolorum consequuntur,</p></li>
            <li><p>in amet libero magnam consectetur facere,</p></li>
            <li><p>accusantium sed, adipisci aliquam unde! Sit, iure.</p></li>
            <li>
              <h3>Additional requirements</h3>
              <p>All entries must be the participant’s own image or have the relevant permission</p>
            </li>
            <li><p>The entrant must be the lorem</p></li>
          </ol>
        </li>
        <li>
        <h2>Winner Selection</h2> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tenetur minus dolores! Natus harum pariatur voluptas, voluptatibus magnam, animi explicabo eos laudantium delectus nobis repellat dicta eveniet, et blanditiis ducimus!</p>
        </li>
      </ol>
    </article>
  </body>
</html>

—Codepenを参照してください

于 2014-10-16T15:42:00.337 に答える
-1

私が試した1つのことは、font-size：0を追加することでした。これは、前述の「スキップ」クラスに適用できます。

確かに、このソリューションにはHTMLの純度がいくらか欠けていますが、非常に単純です。

于 2018-07-09T14:52:30.970 に答える