是否可以使用相同的底层HTML结构使用CSS创建这三种不同的布局？

Question

我必须在HTML中创建一个名称 - 值列表.(实际上它们是表单元素,label并且input)

如何构建此输出,以便Web设计人员可以创建以下三种不同的布局而无需更改原始HTML结构？

变式1:

Name One:
Value One

Name Two:
Value Two

变式2:

Name One:         Value One
Longer Name Two:  Value Two

变式3:

       Name One:  Value One
Longer Name Two:  Value Two

单独为变体2和3创建输出将是微不足道的,我只使用表格并使用CSS更改对齐.

但是当我想要允许所有三种变体时,我该怎么做呢？CSS代码怎么样？它甚至可能吗？

Answer 1

我会使用DL列表,例如:

<dl>
   <dt>Name One:</dt>
   <dd>Value One</dd>
   <dt>Name Two:</dt>
   <dd>Value Two</dd>
   <dt>Name Three:</dt>
   <dd>Value Three</dd>
</dl>

和风格使用(粗略地):

例1:

dl dt { }
dl dd { margin: 0px; padding: 0px; }

例2:

dl dt { display: block; float: left; width: 150px; clear:left; }
dl dd { display: block; float: left; }

例3:

dl dt {display: block; float: left; width: 150px; text-align: right; clear:left; }
dl dd {display: block; float: left; }

......而且它是语义的.