html - 如何使描述列表内联？

Question

我正在设置一个描述列表，我希望术语和描述各占一行，如下所示:

任期 任期 任期 任期 任期 任期>
Desc Desc Desc Desc Desc Desc

需要注意的是，我会将术语的背景设为黑色圆圈，并且我需要将术语在背景圆圈内垂直和水平居中，描述在术语下方居中。

Here is a JSFiddle到目前为止，这是我对 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>

有什么想法可以实现吗？谢谢!

Answer 1

无需更改 HTML 结构即可完成

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;
}