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

如何内联描述列表？

1 个答案: