Geek asks and answers

How can I get a list of HTML definitions to follow list style style rules?

So, I'm marking up client web design. The page is a frequently asked questions page in which each section of frequently asked questions contains a list of questions and answers. The most appropriate semantic markup for this scenario is the html definition list.

The client’s layout also shows the numbers next to each pair of questions / answers, for example, an ordered list.

So, naturally, I thought that just mark the content with an element <dl>and add it using CSS list-style-type: decimal. However, this is completely ignored.

Is it because the item <dl>cannot accept the list style? This seems terribly inverse, since it is, after all, a list item!

Or am I doing something wrong with my markup?

Here is an example of my CSS and HTML code:

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>
Run codeHide result
+5
source share
3 answers

From Mozilla Docs :

The CSS style property of a list style indicates the appearance of a list item. Since this is the only one that displays: list-item by default, this usually constitutes an <li> element, but can be any element with this display value.

You can apply display:list-itemto your element dtin CSS, and then also apply a parameter to it list-style-type.

dt.wanna-be-list {
  display:list-item;
  list-style-type: square;
}
+8
source

Try the jsFiddle example :

<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;
}

From this explanation you can see that it works in this example.

+1

Ol ( ), (ul ).

0

More articles:


All Articles