CODEWITHSUNDEEP
htmlcsshtml-listsflexboxhorizontallist
migli
migli

Reputation: 3250

How to make semantic html horizontal definition list with auto width?

Semantic inline definition list in html :

<dl>
  <dt>Item 1</dt>
  <dd>def. 1</dd>
  <dt>Item 2</dt>
  <dd>def. 2</dd>
</dl>

How to render this in 2 columns using only css (no js) and auto-width each column ?

Easy using fixed width or percent width, but I didn't find any solution with auto-width.

(I tried flexbox and multicolumns)

Any idea ?

Thanks

Upvotes: 2

Views: 2632

Answers (2)

migli
migli

Reputation: 3250

A deadly simple solution (semantic, fully-working, no javascript) :

dl.horizontal-definition-list {
    display: table;
    min-width: 400px;
}

.horizontal-definition-list dt, .horizontal-definition-list dd {
    padding: 2% 10%;
}

.horizontal-definition-list dt {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    background: gold;
}

.horizontal-definition-list dd {
    display: table-cell;
    background: silver;
}

.horizontal-definition-list dd.line-break {
    display: table-row;
}
<dl class="horizontal-definition-list">
    <dt>Term 1</dt>
    <dd>definition 1</dd>
    <dd class="line-break"></dd>
    <dt>Term 2</dt>
    <dd>definition 2</dd>
    <dd class="line-break"></dd>
    <dt>Term 3</dt>
    <dd>definition 3<br>(multiline, no problem)</dd>
    <dd class="line-break"></dd>
    <dt>Term 4</dt>
    <dd class="red-text">definition 4</dd>
</dl>

Upvotes: 4

kukkuz
kukkuz

Reputation: 42352

So I have a solution using a flexbox, but I don't think you can do much without specifying half widths.

*{
  box-sizing: border-box;
}
dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
}
dl dt,
dl dd {
  width: 50%;
  margin: 0;
  border: 1px solid red;
}
<dl>
  <dt>Item 1</dt>
  <dd>def. 1</dd>
  <dt>Item 2</dt>
  <dd>def. 2</dd>
</dl>

Notes:

  1. I'm using flex-wrapping to achieve the layout with each element at half width of the screen.

  2. dd has a default margin value which you should reset using margin: 0.

Please let me know your feedback on this. Thanks!

EDIT:

If you have multiple dds, then you can use this:

*{
  box-sizing: border-box;
}
dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
}
dl dt,
dl dd {
  width: 50%;
  margin: 0;
  border: 1px solid red;
}

dl dt ~ dd + dd {
   margin-left: 50%;
}
<dl>
  <dt>Item 1</dt>
  <dd>def. 1</dd>
  <dd>def. 1</dd>
  <dd>def. 1</dd>
  <dt>Item 2</dt>
  <dd>def. 2</dd>
  <dd>def. 2</dd>
</dl>

Upvotes: 1

Related Questions