CODEWITHSUNDEEP
css
Jagger
Jagger

Reputation: 141

CSS Styling a definition list <dl>

I'm trying to CSS style some HTML to look like the following image. I've decided to use a definition list with some classes to do this.

I'm trying to

  1. move the price to immediately follow the dt tag and
  2. remove the default dd styling so that it is all the way to the left.

Here is my HTML:

<dl>
    <dt>Classic Italian Hoagie</dt>
    <dd class="price">$8</dd>
    <dd class="desc">Pepperoni, salimi, capicola, banana peppers, romaine, tomatoes, provolone & housemade olive oil & herb vinaigrette on a hoagie bun</dd>
</dl>

Upvotes: 1

Views: 3996

Answers (1)

Jamie Dixon
Jamie Dixon

Reputation: 53991

To answer the first part of your question, floating the dt and the .price to the left will line them up next to one another.

You can then get the other dd tags to clear:left which solves your problem.

dt, .price{
    float:left;
    clear:none;
    margin-right:5px;
}

dd{
    clear:left;
}

Working example

As for your second question, I don't see any default styling causing margins on the dd. It looks as required for me but if not you can always put a margin-left:0; on the dd.

Upvotes: 2

Related Questions