0

所以两个 div 进入一个表格

看起来像这样：

<form>
    <div id="top">
        <label>Gimme a Number:<input type="number" /></label><br />
        <label>Gimme a Word:<input type="textarea" /></label><br />
        <label>Now tell me how you feel about HTML forms: <textarea rows="4" cols="50"></textarea></label><br />
    </div>
    <div id="bottom">
        <label>Gimme a Number:<input type="number" /></label><br />
        <label>Gimme a Word:<input type="textarea" /></label><br />
        <label>Now tell me how you feel about HTML forms: <textarea rows="4" cols="50"></textarea></label><br />
    </div>
</form>

有一些 css 定位了所有的表单字段absolute，这里left有一个主要的小提琴（第 1 步）

所以我通过添加额外的换行符来解决第一个问题（步骤 2 的小提琴）。

这不是一个理想的解决方案，原因有两个。DOM 中的额外元素之一，嗯......好吧，看看它。textarea仍然溢出到底div部。

当我尝试的杂项 clearfix 答案不起作用（主要来自其他 SO 问题）时，我发现了一个临时黑客，方法是插入：

<hr class="clearfix" /><br />

在两者之间，并hr visibility:hidden在 CSS 中给出。

这使它在我的页面上工作，但正如你在这里看到的（第 3 步）它实际上并没有工作。在我页面上的表单中，div's 有透明的背景，并且它们之间的距离足够远，用户很满意，而且由于这是一个 Intranet 订单表（使用电话不少于）而不是一个 SV 启动 web 应用程序，我我有点满足于暂时将其制作，但最后，正确的方法是什么？

我应该如何div.top让 包含全部内容，包括textarea? 我已经为带有 的元素尝试了很多“转到”解决方案float，但正如预期的那样，它们不起作用，因为textarea' 没有被float编辑。

理想情况下，我想放弃额外<br>的 s，并让<div>s 实际上包含它们的内容，而无需手动定位每个元素或为页面增加大量复杂性。任何想法表示赞赏。

4

1 回答 1

0

您正在寻找的一个很好的技巧是使用Html Description List。

例如，你可以这样写：

<dl id="top">
    <dt>Gimme a Number:</dt>
    <dd><input type="number" /></dd>
    <dt>Gimme a Word:</dt>
    <dd><input type="textarea" /></dd>
    <dt>Now tell me how you feel about HTML forms:</dt>
    <dd><textarea rows="4" cols="50"></textarea></dd>
</dl>
<dl id="bottom">
    <dt>Gimme a Number:</dt>
    <dd><input type="number" /></dd>
    <dt>Gimme a Word:</dt>
    <dd><input type="textarea" /></dd>
    <dt>Now tell me how you feel about HTML forms:</dt>
    <dd><textarea rows="4" cols="50"></textarea></dd>
</dl>

jsfiddle

这里还有更多的 CSS 让它看起来像你的小提琴：

#top{
    color:white;
    font-weight:700;
    background-color:blue;
}
#bottom{
    font-weight:700;
    background-color:red;
}

dl {
    padding: 0.5em;
    height: 100%;
    display: table;
}

dt {
    float: left;
    clear: left;
}

dd {
    float: right;
    clear: right;
}

小提琴

编辑

关于标签问题不是多余的 - 使用“for”属性有一个简单的解决方案。这是一个例子：

<dt><label for="number1">Gimme a Number:</label></dt>
<dd><input id="number1" type="number" /></dd>

更新的小提琴

您对标签的原始用途：

<label>Gimme a Number:<input type="number" /></label><br />

会将两个标签耦合在一起，不应使用。加上谈论语义，输入真的应该是标签的一部分吗？

考虑到您对 dd / dt 的非语义使用的评论，您可以轻松地在 dt 和 dd 之间交换，就像这个 fiddle 一样。这是更新的示例：

<dd><label for="number1">Gimme a Number:</label></dd>
<dt><input id="number1" type="number" /></dt>

现在我们有了一个语义 HTML，其中 CSS 负责设计选择。

编辑 2

新小提琴- 不需要在height: 100%;dl

于 2013-10-25T17:37:27.807 回答