html - 描述列表使术语动态宽度，描述静态宽度

Question

我正在创建一个描述列表。我希望术语和描述水平排列。此外，我希望术语具有动态宽度，但描述具有静态宽度。

我想要实现的目标:

这是一个 JSFiddle 开始: https://jsfiddle.net/n14bobma/

<dl>
    <dt>term 1</dt>
    <dd>desciption 1</dd>

    <dt>term 2</dt>
    <dd>desciption 2</dd>

    <dt>term 3</dt>
    <dd>desciption 3</dd>
</dl>

Answer 1

我终于从描述列表变成了表格。然而，当 dl 可以是他父级的全宽时，我们找到了一个解决方案，当您在页面上对齐列表时(这是我们的情况)。请参阅此 JSFiddle:https://jsfiddle.net/n14bobma/1/

这是我们使用的 CSS:

dt, dd {
    display: inline-block;

    text-align: right;
}

dt {width: calc(100% - 100px);}
dd {width: 100px;}

我们使用 CSS calc 来制作 <dt>的动态着。对于 IE8 和更旧的 Android 浏览器，您可以使用百分比编写某种回退。