说明列表使术语动态宽度，说明静态宽度

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

我想要什么来实现的：

这里是一个的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>

来源

2015-10-13 Niek Nijland

只有当你在标记中包装每一对，或使用JS我认为。 – Stickers

使用表格将描述与较大的术语对齐。你的结构将接近你所拥有的。 – fbiazi

和: 标签，根据W3C：http://www.w3.org/TR/html-markup/dl.html#dl。所以包装每对不会是一种选择。 –

我终于从一个描述列表改为表。然而，当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钙做出的动态与<dt>的。对于IE8和较旧的Android浏览器，您可以使用百分比编写某种回退。

来源

2015-10-14 10:30:15

说明列表使术语动态宽度，说明静态宽度

回答

相关问题