5

だから私はクライアントのウェブデザインをマークアップしています. このページは FAQ ページで、各 FAQ セクションには質問と回答のリストがあります。このシナリオに最も適したセマンティック マークアップは、html 定義リストです。

クライアントのモックアップには、順序付けされたリストのように、各質問と回答のペアの横に数字も表示されます。

したがって、当然、要素でコンテンツをマークアップし、<dl>CSS を使用してlist-style-type: decimal. ただし、これは完全に無視されます。

<dl>要素がリストスタイルを受け入れられないからですか? 結局のところ、それはリスト要素であるため、ひどく逆に思えます!

それとも、マークアップに何か問題がありますか?

私のコード CSS と HTML の例を次に示します。

dl { list-style: decimal; }
<dl class="some-list">

  <dt><strong>Q</strong>: How Do I Do Some Thing?</dt>
  <dd><p><strong>A:</strong> You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this:</p>
  </dd>

  <dt><strong>Q</strong>: How Do I Do Some Other Thing?</dt>
  <dd><p><strong>A:</strong> You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this:</p>
  </dd>

</dl>

4

3 に答える 3

8

Mozilla ドキュメントから:

CSS の list-style-type プロパティは、リスト項目要素の外観を指定します。display:list-item にデフォルト設定されているのはこれだけなので、これは通常 <li> 要素ですが、この表示値を持つ任意の要素にすることができます。

CSS で要素に適用し、オプションを適用することdisplay:list-itemもできます。dtlist-style-type

dt.wanna-be-list {
  display:list-item;
  list-style-type: square;
}
于 2013-02-25T19:24:33.063 に答える
1

このjsFiddleの例を試してください:

<html>

<dl class="faq">
    <dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
    <dd>1,000,000</dd>
    <dt>What is the air-speed velocity of an unladen swallow?</dt>
    <dd>What do you mean? An African or European swallow?</dd>
    <dt>Why did the chicken cross the road?</dt>
    <dd>To get to the other side</dd>
</dl>

<css>

.faq {
    counter-reset: my-badass-counter;
}
.faq dd {
    margin: 0 0 50px;
}
.faq dt:before {
    content: counter(my-badass-counter, decimal);
    counter-increment: my-badass-counter;
    font: bold 50px/1 Sans-Serif;
    left: 0;
    position: absolute;
    top: 0;
}
.faq dt, .faq dd {
    padding-left: 50px;
}
.faq dt {
    font: bold 16px Georgia;
    padding: 4px 0 10px;
    position: relative;
}

この説明から、この例で動作していることがわかります

于 2013-02-25T19:35:44.353 に答える
0

代わりに Ol(ordered list) を使用すると、スタイルが機能するはずです (unordered の場合は ul)。

于 2013-02-25T19:24:54.740 に答える