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..

    Why are THs bolder than TDs and how to avoid it?

    How to fix Image on top of text with css

    How do I change the display position from absolute to relative?

    how to trigger “onMouseOut” from click

    How to set background color based on YAML front matter (Jekyll)

    How to magnify a pure CSS menu item when hovering using JS?

    How to append a CSS rule to the another CSS rule

    Showing HTML page with CSS attached in a WebView

    how to apply css to web app?

    CSS display table - How to have 2 fixed and one flexible column

    Mojolicious Tests: How to get the input value using css-selectors

    How can I get a box shadow to start below a thick border?

    How to make the divider between two tbody elements moveable

    How to make a Xul button bigger using css as it get focus?

    How to configure CSS with Spring MVC and Tiles

    How to align an element when it locates below some float elements?

    How do you work on your HTML and CSS in PLay! + intellij idea? [closed]

    CSS : How to give different spacers within the same navigation menu

    How to change CSS of child element inside parent
    element Using jQuery onclick event?

    Z-index issues - How to bring a child element onto the parent's below element?

    How to make corners of progress bar round in css

    Css accordion menu, how to set height to automatic?

    How to rotate and translate using CSS in IE8?

    How do you override CSS applied by jQuery UI theme properly?

    css: how to display prev and next links outside slider

    How to avoid setting CSS class to one table among two tables?

    Text-only CSS slideshow

    In CSS computed properties panel, the topmost style does not seem to overwrite the less specific style — how could that be?

    How to add animated gif to an image sprite?

    (HTML/CSS) How do I repeat items like on Google or Reddit?