CODEWITHSUNDEEP
css
Sonhja
Sonhja

Reputation: 8458

How to make a dl list horizontal

I have a list that looks like this:

<dl>
    <dt>Something</dt>
    <dd><div>Div with an image</div></dd>
    <dt>Second</dt>
    <dd><div>Second Div</div></dd>
</dl>

And when you run it on the page, it looks vertical, and I want it to look horizontal. The code looks like this:

Something
Div with an image
Second
Second Div

But I want something like this:

Something                     Second
Div with an image             Second Div

I can't change the dl and dt elements order, as it's a part of code that I can't modify. But all of them are tagged with classes or ids, so I can modify CSS.

So, is there any way to make the list look horizontal with this structure?

Upvotes: 4

Views: 23767

Answers (7)

Felix Geenen
Felix Geenen

Reputation: 2707

Check out this short grid version:

dl {
    display: grid;
    grid-template-columns: 50% 50%;
}

Upvotes: 4

Locdarb
Locdarb

Reputation: 494

Solution using grid.

dl {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}

Upvotes: 16

R D
R D

Reputation: 685

You can solve this using flexbox. The downside is that you have to specify the height of the container.

dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 5em;
}

dd, dt {
    flex-basis: 50%;
}

It works by placing content in columns (flex-direction), and forcing a wrap (flex-wrap) after every second element as the height exceeds 100% (= 2 * flex-basis).

Upvotes: -1

kravits88
kravits88

Reputation: 13049

For others using Bootstrap there is a horizontal-description class for this:

<dl class="dl-horizontal">
    <dt>Something</dt>
    <dd><div>Div with an image</div></dd>
    <dt>Second</dt>
    <dd><div>Second Div</div></dd>
</dl>

https://jsfiddle.net/rh2otd6e/

Upvotes: 2

Spacemile
Spacemile

Reputation: 367

Take a look at this article http://www.alistapart.com/articles/multicolumnlists/

This solution will also work with dl.

HTML

<dl>
    <dt class="col-1">Something</dt>
    <dd class="col-1"><div>Div with an image</div></dd>
    <dt class="col-2 reset">Second</dt>
    <dd class="col-2"><div>Second Div</div></dd>
</dl>

CSS

dt, dd {line-height: 2em;}
.col-1 {width: 48%;}
.col-2 {margin-left: 50%;}
.reset {margin-top: -4em;}

Here is the working example http://jsfiddle.net/YNxCa/

Or you can use some other method, eg. with absolute positioning

Upvotes: 2

user1721135
user1721135

Reputation: 7092

I would use a table for this.

Or if it has to be definiton list try:

dt {
float:left;
}
dd {
float:left;
clear:right;
}

Upvotes: -2

Chanckjh
Chanckjh

Reputation: 2597

<dl>
    <dt>Something</dt>
    <dd><div>Div with an image</div></dd>
    <dt>Second</dt>
    <dd><div>Second Div</div></dd>
</dl>

css it with float

dt{ float: left; }
dd{ float: right; }

Upvotes: 2

Related Questions