How to make <dl> layout horizontally?

by kazu69

HTML

<dl>
        <dt>term 1</dt>
        <dd>definition 1</dd>
    </dl>
    <dl>
        <dt>term 2</dt>
        <dd>definition 2</dd>
    </dl>
    <dl>
        <dt>term 3</dt>
        <dd>definition 3</dd>
    </dl>

CSS

dl {
        float: left;
        overflow: hidden;
    }
   dt {
       background: #ddd;
   }
   dl dd {
       margin: 0;
       background: #eee;
    }
    dt, dd { 
      width: 100px;
      margin-right: 10px;
      text-align: center;
    }