Question

所以两个分区走进一个表格

看起来像这样：

<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，校长的小提琴是here (Step 1)

所以我通过添加额外的换行符(fiddle of step 2)来解决第一个问题。

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

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

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

介于两者之间，并在CSS中提供hr visibility:hidden。

这使它可以在我的页面上运行，但正如您所看到的here (Step 3)它实际上并不起作用。在我页面上的表单中，div具有透明背景，并且它们远远超出了用户的满意程度，因为这是一个内部网订单（从电话中使用不少）而不是SV启动webapp，我现在很满意它的生产，但最后，这样做的正确方法是什么？

我应该如何让div.top包含完整内容，包括textarea？我已经为float的元素尝试了许多“转到”解决方案，但正如预期的那样，它们不起作用，因为textarea不是float。

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

Answer 1

您正在寻找的一个很好的技巧是使用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

这里有点麻烦让它看起来像你的小提琴：

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

fiddle

修改

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

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

updated fiddle

您对标签的原始使用：

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

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

考虑到您对dd / dt的非语义使用的评论，您可以轻松地在dt和dd like this fiddle之间进行切换。这是更新的示例：

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

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

修改2

new fiddle - 不需要height: 100%; dl

遇到clearfix类型问题

所以两个分区走进一个表格

1 个答案: