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

我必须在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代码怎么样？它甚至可能吗？

我会使用DL列表,例如:

   
Name One:
   
Value One
   
Name Two:
   
Value Two
   
Name Three:
   
Value Three

和风格使用(粗略地):

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

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