CODEWITHSUNDEEP
htmlcss
AnonyMouse
AnonyMouse

Reputation: 18650

How to get dl dds to line up with each other

I have the following html:

<html>
<head>
<style type="text/css">
dt
{
clear:left;
float:left;
padding-right:50px;
}
</style>
</head>
<body>
<dl>
<dt>First Answer</dt>
<dd>Dog</dd>
<dt>Second Answer</dt>
<dd>Cat</dd>
</dl>
</body>
</html>

When you run it the Dog and Cat don't line up. I was really hoping to get the first letters of Dog and Cat to line up with each other.

Does anyone know how to style this to achieve this?

Rather not use a table.

Upvotes: 0

Views: 250

Answers (2)

dsfg
dsfg

Reputation: 130

Here is your updated HTML/CSS

<style type="text/css">
dt{
    clear:left;
    float:left;
    padding-right:50px;
    width:200px;
}
</style>
<body>
    <dl>
       <dt>First Answer</dt>
       <dd>Dog</dd>
       <dt>Second Answer</dt>
       <dd>Cat</dd>
       </dl>
</body>

This is your updated code...

Upvotes: 0

kevinAlbs
kevinAlbs

Reputation: 1124

You can set a fixed width on the dt element.

dt
{
clear:left;
float:left;
width:200px;
}

Upvotes: 2

Related Questions