How to style dt and dd so they are on the same line

Question

Using CSS  how can I style the following    lt dl gt       lt dt gt Mercury lt  dt gt       lt dd gt Mercury  0 4 AU from the Sun  is the closest planet to the Sun and the smallest planet  lt  dd gt       lt dt gt Venus lt  dt gt       lt dd gt Venus  0 7 AU  is close in size to Earth   0 815 Earth masses  and like Earth  has a thick silicate mantle around an iron core  lt  dd gt       lt dt gt Earth lt  dt gt       lt dd gt Earth  1 AU  is the largest and densest of the inner planets  the only one known to have current geological activity  lt  dd gt   lt  dl gt    so the content of the dt show in one column and the content of the dd in another column  with each dt and the corresponding dd on the same line  I e  producing something that looks like

User · Answer

I recently needed to mix inline and non-inline dt/dd pairs, by specifying the class dl-inline on <dt> elements that should be followed by inline <dd> elements.

_x000D_

dt.dl-inline {_x000D_
  display: inline;_x000D_
}_x000D_
dt.dl-inline:before {_x000D_
  content:"";_x000D_
  display:block;_x000D_
}_x000D_
dt.dl-inline + dd {_x000D_
  display: inline;_x000D_
  margin-left: 0.5em;_x000D_
  clear:right;_x000D_
}

_x000D_

<dl>_x000D_
    <dt>The first term.</dt>_x000D_
    <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>_x000D_
    <dt class="dl-inline">The second term.</dt>_x000D_
    <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>_x000D_
    <dt class="dl-inline">The third term.</dt>_x000D_
    <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>_x000D_
    <dt>The fourth term</dt>_x000D_
    <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>_x000D_
</dl_x000D_
_x000D_
>

_x000D_

User · Answer

This works on IE7   is standards compliant  and allows differing heights    lt style gt  dt       float  left      clear  left      width  100px              padding  5px 0      margin 0    dd       float  left      width  200px      padding  5px 0      margin 0     cf after       content         display table      clear both     lt  style gt    lt dl class  cf  gt       lt dt gt A lt  dt gt       lt dd gt Apple lt  dd gt       lt dt gt B lt  dt gt       lt dd gt Banana lt br gt Bread lt br gt Bun lt  dd gt       lt dt gt C lt  dt gt       lt dd gt Cinnamon lt  dd gt   lt  dl gt            See the JSFiddle

User · Answer

Assuming you know the width of the margin   dt   float  left  width  100px    dd   margin-left  100px

User · Answer

You can use CSS Grid   x000D   x000D  dl     display  grid    grid-template-columns  repeat 2  minmax 0  1fr      x000D   lt dl gt   lt dt gt Title 1 lt  dt gt   lt dd gt Description 1 lt  dd gt   lt dt gt Title 2 lt  dt gt   lt dd gt Description 2 lt  dd gt   lt dt gt Title 3 lt  dt gt   lt dd gt Description 3 lt  dd gt   lt dt gt Title 4 lt  dt gt   lt dd gt Description 4 lt  dd gt   lt dt gt Title 5 lt  dt gt   lt dd gt Description 5 lt  dd gt   lt  dl gt  x000D   x000D   x000D

User · Answer

Here s another option that works by displaying the dt and dd inline and then adding a line break after the dd    dt  dd    display  inline    dd after    content   a    white-space  pre      This is similar to Navaneeth s solution above  but using this approach  the content won t line up as in a table  but the dd will follow the dt immediately on every line regardless of length

User · Answer

Here is one possible flex-based solution  SCSS   dl     display  flex    flex-wrap  wrap    width  100     dt       width  150px        dd       margin  0      flex  1 0 calc 100  - 150px          that works for the following HTML  pug  dl   dt item 1   dd desc 1   dt item 2   dd desc 2

User · Answer

this works to display them as table  with border  it should be responsive with 3em the width of the first column  The word-wrap just breaks any words wider than the column   dl   display block        border 2px solid black        margin  1em      dt   display inline-block        width 3em        word-wrap break-word     dd   margin-left 0        display inline        vertical-align top        line-height 1 3     dd after   content    display block       Comparison of  lt table gt  with  lt dl gt     x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt style gt  x000D   x000D  dl   display block border 2px outset black margin 1em  line-height 18px     x000D  dt   display inline-block width 3em  word-wrap break-word    x000D   x000D  dd   margin-left 0  display inline  vertical-align top  line-height 1 3    x000D  dd after   content    display block     x000D   x000D   x000D   glosstable   border 2px outset  aaaaaa margin 1em  text-align left    x000D   glosstable  table  tbody   tr   td  dl  dt  font-size 100   line-height 18px   x000D   x000D   glossaz   font-size 140  padding-left 2em font-weight bold color   00838c     x000D  td first  width  2 5em    x000D   lt  style gt  x000D   lt body gt  x000D  Table lt br gt  x000D   lt table class  glosstable  gt  x000D     lt tr gt  lt td class  first  gt Milk lt  td gt  x000D     lt td class  glossdata  gt Black hot drink lt  td gt  x000D   lt  tr gt  x000D     lt tr gt  lt td class  first  gt Coffee2 lt  td gt  x000D     lt td class  glossdata  gt Black hot drink lt  td gt  x000D   lt  tr gt  x000D     lt tr gt  lt td gt Warm milk lt  td gt  x000D     lt td class  glossdata  gt White hot drink lt  td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D  DL list  lt br gt  x000D   lt dl class  glosstablep  gt  x000D     lt dt gt Milk lt  dt gt  x000D     lt dd class  glossdata  gt White cold drink lt  dd gt  x000D     lt dt gt Coffee2 lt  dt gt  x000D     lt dd class  glossdata  gt Black cold drink lt  dd gt  x000D     lt dt gt Warm Milk lt  dt gt  x000D     lt dd class  glossdata  gt White hot drink lt  dd gt  x000D   lt  dl gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I have got a solution without using floats  check this on codepen  Viz   dl inline dd     display  inline    margin  0    dl inline dd after    display  block    content        dl inline dt    display  inline-block    min-width  100px       Update - 3rd Jan 2017  I have added flex-box based solution for the problem  Check that in the linked codepen  amp  refine it as per needs  Thanks   dl inline-flex     display  flex    flex-flow  row    flex-wrap  wrap    width  300px          set the container width     overflow  visible    dl inline-flex dt     flex  0 0 50     text-overflow  ellipsis    overflow  hidden    dl inline-flex dd     flex 0 0 50     margin-left  auto    text-align  left    text-overflow  ellipsis    overflow  hidden

User · Answer

I need to do this and have the  lt dt gt  content vertically centered  relative to the  lt dd gt  content  I used display  inline-block  together with vertical-align  middle  See full example on Codepen here   dl-horizontal     font-size  0    text-align  center     dt  dd       font-size  16px      display  inline-block      vertical-align  middle      width  calc 50  - 10px          dt       text-align  right      padding-right  10px         dd       font-size  18px      text-align  left      padding-left  10px

User · Answer

I usually start with the following when styling definition lists as tables   dt  dd         Override browser defaults        display  inline      margin  0     dt        clear left      float left      line-height 1     Adjust this value as you see fit        width 33      1 3 the width of the parent  Adjust this value as you see fit       dd       clear right      float  right      line-height 1     Adjust this value as you see fit        width 67      2 3 the width of the parent  Adjust this value as you see fit

User · Answer

If you use Bootstrap 3  or earlier       lt dl class  dl-horizontal  gt       lt dt gt Label  lt  dt gt       lt dd gt        Description of planet      lt  dd gt       lt dt gt Label2  lt  dt gt       lt dd gt        Description of planet      lt  dd gt   lt  dl gt

User · Answer

x000D   x000D  dl   x000D    width  100   x000D    overflow  hidden  x000D    background   ff0  x000D    padding  0  x000D    margin  0 x000D    x000D  dt   x000D    float  left  x000D    width  50   x000D       adjust the width  make sure the total of both is 100     x000D    background   cc0  x000D    padding  0  x000D    margin  0 x000D    x000D  dd   x000D    float  left  x000D    width  50   x000D       adjust the width  make sure the total of both is 100     x000D    background   dd0 x000D    padding  0  x000D    margin  0 x000D    x000D   lt dl gt  x000D     lt dt gt Mercury lt  dt gt  x000D     lt dd gt Mercury  0 4 AU from the Sun  is the closest planet to the Sun and the smallest planet  lt  dd gt  x000D     lt dt gt Venus lt  dt gt  x000D     lt dd gt Venus  0 7 AU  is close in size to Earth   0 815 Earth masses  and like Earth  has a thick silicate mantle around an iron core  lt  dd gt  x000D     lt dt gt Earth lt  dt gt  x000D     lt dd gt Earth  1 AU  is the largest and densest of the inner planets  the only one known to have current geological activity  lt  dd gt  x000D   lt  dl gt  x000D   x000D   x000D

User · Answer

CSS Grid layout     Like tables  grid layout enables an author to align elements into columns and rows    https   developer mozilla org en-US docs Web CSS CSS Grid Layout   To change the column sizes  take a look at the grid-template-columns property    x000D   x000D  dl   x000D    display  grid  x000D    grid-template-columns  max-content auto  x000D    x000D   x000D  dt   x000D    grid-column-start  1  x000D    x000D   x000D  dd   x000D    grid-column-start  2  x000D    x000D   lt dl gt  x000D     lt dt gt Mercury lt  dt gt  x000D     lt dd gt Mercury  0 4 AU from the Sun  is the closest planet to the Sun and the smallest planet  lt  dd gt  x000D     lt dt gt Venus lt  dt gt  x000D     lt dd gt Venus  0 7 AU  is close in size to Earth   0 815 Earth masses  and like Earth  has a thick silicate mantle around an iron core  lt  dd gt  x000D     lt dt gt Earth lt  dt gt  x000D     lt dd gt Earth  1 AU  is the largest and densest of the inner planets  the only one known to have current geological activity  lt  dd gt  x000D   lt  dl gt  x000D   x000D   x000D

User · Answer

Most of what people here suggested works  however you should only place generic code in to the style sheet  and place the specific code in to the html code as shown below  Otherwise you will end up with a bloated style sheet   Here is how I do it   Your style sheet code    lt style gt      dt           float left            dd           border-left 2px dotted  aaa          padding-left  1em          margin   5em            lt  style gt    Your html code    lt dl gt       lt dt gt 1st Entity lt  dt gt       lt dd style  margin-left  5em   gt Consumer lt  dd gt       lt dt gt 2nd Entity lt  dt gt       lt dd style  margin-left  5em   gt Merchant lt  dd gt       lt dt gt 3rd Entity lt  dt gt       lt dd style  margin-left  5em   gt Provider  or cToken direct to Merchant lt  dd gt       lt dt gt 4th Entity lt  dt gt       lt dd style  margin-left  5em   gt cToken to Provider lt  dd gt   lt  dl gt    Looks like this

User · Answer

I ve found a solution that seems perfect to me  but it needs extra  lt div gt  tags  It turns out that it is not necessary to use  lt table gt  tag to align as in a table  it suffices to use display table-row  and  display table-cell  styles    lt style type  text css  gt  dl  gt  div     display  table-row    dl  gt  div  gt  dt     display  table-cell    background   ff0    dl  gt  div  gt  dd     display  table-cell    padding-left  1em    background   0ff     lt  style gt    lt dl gt     lt div gt       lt dt gt Mercury lt  dt gt       lt dd gt Mercury  0 4 AU from the Sun  is the closest planet to the Sun and the smallest planet  lt  dd gt     lt  div gt     lt div gt       lt dt gt Venus lt  dt gt       lt dd gt Venus  0 7 AU  is close in size to Earth   0 815 Earth masses  and like Earth  has a thick silicate mantle around an iron core  lt  dd gt     lt  div gt     lt div gt       lt dt gt Earth lt  dt gt       lt dd gt Earth  1 AU  is the largest and densest of the inner planets  the only one known to have current geological activity  lt  dd gt     lt  div gt   lt  dl gt

User · Answer

Depending on how you style the dt and dd elements  you might encounter a problem  making them have the same height  For instance  if you want to but some visible border at the bottom of those elements  you most probably want to display the border at the same height  like in a table   One solution for this is cheating and make each row a  dl  element   this is equivalent to using tr in a table  We loose the original interest of definition lists  but on the counterpart this is an easy manner to get pseudo-tables that are quickly and pretty styled   THE CSS   dl    margin 0   padding 0   clear both   overflow hidden    dt    margin 0   padding 0   float left   width 28    list-style-type bullet    dd    margin 0   padding 0   float right   width 72       huitCinqPts dl dt   huitCinqPts dl dd  font-size 11 3px    bord inf gc dl  padding-top 0 23em padding-bottom 0 5em border-bottom 1px solid  aaa     THE HTML    lt div class  huitCinqPts bord inf gc  gt     lt dl gt  lt dt gt Term1 lt  dt gt  lt dd gt Definition1 lt  dd gt  lt  dl gt     lt dl gt  lt dt gt Term2 lt  dt gt  lt dd gt Definition2 lt  dd gt  lt  dl gt   lt  div gt

User · Answer

In my case I just wanted a line break after each dd element  Eg  I wanted to style this   lt dl class  quot p quot  gt     lt dt gt Created lt  dt gt   lt dd gt  lt time gt 2021-02-03T14 23 43 073Z lt  time gt  lt  dd gt     lt dt gt Updated lt  dt gt   lt dd gt  lt time gt 2021-02-03T14 44 15 929Z lt  time gt  lt  dd gt   lt  p gt   like the default style of this   lt p gt     lt span gt Created lt  span gt   lt time gt 2021-02-03T14 23 43 073Z lt  time gt  lt br gt     lt span gt Updated lt  span gt   lt time gt 2021-02-03T14 44 15 929Z lt  time gt   lt  p gt   which just looks like this   Created 2021-02-03T14 23 43 073Z Updated 2021-02-03T14 44 15 929Z  To do that I used this CSS  dl p  gt  dt     display  inline     dl p  gt  dd     display  inline    margin  0     dl p  gt  dd  after     content   quot  A quot     white-space  pre     Or you could use this CSS  dl p  gt  dt     float  left    margin-inline-end  0 26em     dl p  gt  dd     margin  0     I also added a colon after each dt element with this CSS  dl p  gt  dt  after     content   quot   quot

User · Answer

See jsFiddle demo  I needed a list exactly as described for a project that showed employees at a company  with their photo on the left  and information on the right  I managed to accomplish the clearing by using psuedo-elements after every DD    myList dd after     content        display  table    clear  both      In addition  I wanted the text to only display to the right of the image  without wrapping under the floated image  pseudo-column effect   This can be accomplished by adding a DIV element with the CSS overflow  hidden  around the content of the DD tag  You can omit this extra DIV  but the content of the DD tag will wrap under the floated DT   After playing with it a while  I was able to support multiple DT elements per DD  but not multiple DD elements per DT  I tried adding another optional class to clear only after the last DD  but subsequent DD elements wrapped under the DT elements  not my desired effect    I wanted the DT and DD elements to form columns  and the extra DD elements were too wide    By all rights  this should only work in IE8   but due to a quirk in IE7 it works there as well

User · Answer

Because I have yet to see an example that works for my use case  here is the most full-proof solution that I was able to realize    x000D   x000D  dd   x000D      margin  0  x000D    x000D  dd  after   x000D      content    A   x000D      white-space  pre-line  x000D    x000D  dd last-of-type  after   x000D      content      x000D    x000D  dd  dt   x000D      display  inline  x000D    x000D  dd  dt   address   x000D      vertical-align  middle  x000D    x000D  dt   x000D      font-weight  bolder  x000D    x000D  dt  after   x000D      content        x000D    x000D   address   x000D      display  inline-block  x000D      white-space  pre  x000D    x000D  Surrounding x000D   x000D   lt dl gt  x000D     lt dt gt Phone Number lt  dt gt  x000D     lt dd gt  1  800  555-1234 lt  dd gt  x000D     lt dt gt Email Address lt  dt gt  x000D     lt dd gt  lt a href     gt example example com lt  a gt  lt  dd gt  x000D     lt dt gt Postal Address lt  dt gt  x000D     lt dd gt  lt div class  address  gt 123 FAKE ST lt br   gt EXAMPLE EX  00000 lt  div gt  lt  dd gt  x000D   lt  dl gt  x000D   x000D  Text x000D   x000D   x000D    Strangely enough  it doesn t work with display  inline-block  I suppose that if you need to set the size of any of the dt elements or dd elements  you could set the dl s display as display  flexbox  display  -webkit-flex  display  flex  and the flex shorthand of the dd elements and the dt elements as something like flex  1 1 50  and display as display  inline-block  But I haven t tested that  so approach with caution

[html] How to style dt and dd so they are on the same line?

Examples related to html

Examples related to css