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

我必须用HTML创建一个名值列表。（实际上它们是表单元素，

标签

和

输入

）

如何构建此输出，以便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列表，例如：

<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>

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

---

。。。它是语义的。

这是可能的，你可以在以下网址找到很多很好的例子（你可以复制！）。

HTML:

<div class="container">
   <label for="Name" class="label">Name:</label>
   <input id="Name" name="Name" />
</div>
<div class="container">
   <label for="LongName" class="label">Long Name:</label>
   <input id="LongName" name="LongName" />
</div>

CSS2：

CSS3：

---

每当我必须这样做时，我发现的问题是，列表的左侧（例如示例2和3）没有办法（或者至少我不知道任何方法）让两列都具有可变的宽度

当要在第一列中显示的数据是可变的（即不是标签）或以不同的语言显示时，这是一个特别的问题

---

如果这两个都不是问题，那么使用Program.X中的DL解决方案就可以了。

我构建了一个CSS表单框架，名为。所有3个变体均包含在内，无需更改任何HTML

示例：

---

哇，那是一个很棒的网站！谢谢语义解决方案的大+1。dl dt dd结构正是用于名称值列表的正确元素。我必须说，显示：块属性是冗余的，因为dt和dd已经是块元素。我已经测试了您的代码，因此示例2和3不起作用。我不得不将“clear:left”添加到“dt”中，并从dd中删除“clear:right”。也许您可以再次检查它，然后更改代码或不更改代码。谢谢完成。还是老样子。你可能会认为它会像那样工作，然后浏览器就会做出相反的行为。哦，关于显示器：块；我有一个习惯，就是在我的CSS冗长！

<div class="container">
   <label for="Name" class="label">Name:</label>
   <input id="Name" name="Name" />
</div>
<div class="container">
   <label for="LongName" class="label">Long Name:</label>
   <input id="LongName" name="LongName" />
</div>

.container {}
.label
{
   display: block;
}

.container
{
   margin-left: 12em;
}

.label
{
   float: left;
   margin-left: -12em;
}

.container
{
    margin-left: 8em;
}

.label
{
    float: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
}