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

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：

EmployeeID, 
EmployeeFirstName, 
EmployeeLastName, 
PeriodID, 
PeriodStart, 
PeriodEnd, 
EntitleAnnual, 
AssignedAnnual, 
AnnualBalance, 
EntitleSick, 
AssignedSick, 
SickBalance

我们使用CSS calc来生成dt, dd { display: inline-block; text-align: right; } dt {width: calc(100% - 100px);} dd {width: 100px;} 的动态。对于IE8和较旧的Android浏览器，您可以使用百分比编写某种回退。