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

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

Answer 2

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

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

Answer 4

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

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

如果这些都不是你的问题，那么使用Program.X中的DL的解决方案应该这样做。

Answer 5

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

示例：

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

5 个答案: