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

【问题标题】：Is it possible to create these three different layouts with CSS using the same underlying HTML structure?是否可以使用相同的底层 HTML 结构使用 CSS 创建这三种不同的布局？
【发布时间】：2010-10-14 18:16:29
【问题描述】：

我必须在 HTML 中创建一个名称-值列表。（其实就是表单元素label和input）

如何构建此输出，以便网页设计师可以在不更改原始 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 代码会是什么样子？有没有可能？

【问题讨论】：

标签： html css

【解决方案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; }

...它是语义的。

【讨论】：

语义解决方案的大+1。 dl dt dd 结构正是用于名称值列表的正确元素。
我不得不说 display:block 属性是多余的，因为 dt 和 dd 已经是块元素
我已经测试了您的代码，这样示例 2 和 3 不起作用。我不得不将“clear:left”添加到“dt”并从 dd 中删除“clear:right”。也许您可以仔细检查它，然后更改您的代码。谢谢！
完成。一样旧。您会认为它会像那样工作，然后浏览器会采取其他方式。哦，关于显示：块；我确实有在我的 CSS 中冗长的习惯！

【解决方案2】：

这是可能的，您可以在CSS Zen Garden 找到很多很棒的示例（您可以复制！）。

【讨论】：

哇，这是一个很棒的网站！谢谢！

【解决方案3】：

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>

CSS1：

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

CSS2：

.container
{
   margin-left: 12em;
}

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

CSS3：

.container
{
    margin-left: 8em;
}

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

【讨论】：

【解决方案4】：

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

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

如果这些对您来说都不是问题，那么使用 Program.X 中的 DL 的解决方案应该可以解决问题。

【讨论】：

【解决方案5】：

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

例子：

【讨论】：