How to make a descriptions list inline?


Tags: html,css

Problem :

I am setting up a descriptions list and I would like the terms and descriptions to be on one line each like so:

Term Term Term Term Term Term
Desc Desc Desc Desc Desc Desc

The caveat to this is that I will be making the background of the term a black circle and I need to center the term vertically and horizontally within the background circle and the description centered below the term.

Here is a JSFiddle and here is what I have so far for HTML/CSS:

<style type="text/css">
dl dt {
    background:#000;
    border-radius: 50%;
    width: 50px;
    height: 50px; 
    color:#fff;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
}
dd {
    text-align:center;
    width:50px;
}
</style>

<dl>
      <dt>N</dt>
      <dd>6.0%</dd>
      <dt>P</dt>
      <dd>12.0%</dd>
      <dt>K</dt>
      <dd>2.0%</dd>
      <dt>Zn</dt>
      <dd>1.0%</dd>
      <dt>Fe</dt>
      <dd>0.3%</dd>
      <dt>Mn</dt>
      <dd>0.04%</dd>
      <dt>Cu</dt>
      <dd>0.05%</dd>
</dl>

Any ideas how I can accomplish this? Thanks!



Solution :

Can be done without HTML structure change

DEMO

dl {
    position:relative;
    left:-90px;
}
dl dt {
    background:#000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color:#fff;
    text-align:center;
    vertical-align:middle;
    line-height:50px;
    display:inline-block;
    position:relative;
    left:90px;
}
dd {
    display:inline-block;
    text-align:center;
    width:50px;
    position:absolute;
    top:60px;
}

    CSS Howto..

    How do I convert HTML to inline CSS in Google AppEngine?

    How to ignore body element style when there is a class at element inside

    How to pass a local file name to css-validator.jar?

    How to reach CSS zen?

    How to insert css arrow into html page and make it clickable

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    How to make centered fixed width body responsive?

    How to align an icon to the right of content

    how to check css is valid for IE8

    How do I focus image from the center (CSS focus)?

    How to use a Video as text background in css

    How to use bootstrap to hide one of div when zoom browser windows size smaller

    How do I select a css element with a text not attached to the attribute?

    How to apply CSS color on parent element using a color picker?

    Showing divs in th on the same line

    How to add style or put a class in a php form_submit button

    How to add padding to 100% div in Bootstrap?

    Off-canvas navigation: How to make a second-level menu slide in on top of first-level menu without covering body text?

    How to resize image according from screen resolution on html css

    How do I vertically centre a div of variable height within a div of variable height?

    How to add a style to