Question

我有一个非常简单的数据输入表单。只是带输入的标签。但我的标签是本地化的，所以我不知道不同语言的文本会有多长。使用表格布局可以轻松解决此问题：

<table>
    <tr>
        <td>
            <label for="Text1">Short</label>
        </td>
        <td>
            <input id="Text1" type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="Text1">Looooooooong</label>
        </td>
        <td>
            <input id="Text2" type="text" />
        </td>
    </tr>
</table>

无论标签有多长，我的布局都会很好。但是我们很多人说使用表格标签和非表格数据并不好。我现在不用div来解决这个问题。

 <div>
    <div style="float:left; width:50px;"><label for="Text3">Short</label></div>
    <div style="float:left;"><input id="Text3" type="text" /></div>
    <br style="clear:left;" />
</div> 
<div>
    <div style="float:left; width:50px;"><label for="Text4">Looooooooong</label></div>
    <div style="float:left;"><input id="Text4" type="text" /></div>
    <br style="clear:left;" />
</div>

使用此解决方案，我需要使用固定大小的div。对于cource，我可以为标签div宽度设置一些大值，但我希望我的UI占用所需的空间。有什么想法吗？

Answer 1

<强> This is what I came up with

它比你的更清洁，包括表格和div方法。

所谓的“div布局”的意思是不要让非语义表卡在你的网站上，就像颈部疼痛一样。这并不一定意味着你需要div！一个简单的表格和标签可以做得很好。

守则

HTML

<form>

    <label>Short<input></label>
    <label>Loooooooooooooooong<input></label>

</form>

CSS

form {
    width: 50%;
}
label {
    display: block;
}
label input {
    float: right;
}

我已将表单设置为50％，以便您可以轻松调整视图端口的大小，并查看宽度不足时会发生什么。这样，输入将被按下，但是hte标签不会被破坏。

通常遵循这条经验法则是好的：如果一个div只有一个嵌套在其中的孩子，你可以通常跳过它。这个规则适用于这样的简单设计（有些情况下复杂的设计问题需要额外的div）

Answer 2

真正获得一个漂亮，可调整的布局的唯一方法，就像你使用HTML表格那样（这里语义正确，如果有人关心这个）是在CSS中使用表格布局，即使用{{ 1}}，display: table等。这可能是显而易见的。但它的浏览器支持将比HTML表更有限。

任何其他方法都有一定的刚性，必须对标签的宽度或整个......构造进行猜测。

Answer 3

虽然我不完全清楚您的布局需求是什么，但我喜欢对标签进行右对齐以提高可读性：

<div>
<div style="float:left; width:104px; text-align:right; margin-right:4px;"><label for="Text3" >Short:</label></div>
<div style="float:left;"><input id="Text3" type="text" /></div>
<br style="clear:left;" />
</div> 
<div>
<div style="float:left; width:104px; text-align:right; margin-right:4px;"><label for="Text4">Looooooooong:</label></div>
<div style="float:left; "><input id="Text4" type="text" /></div>
<br style="clear:left;" />
</div>

Answer 4

我不知道这是否对你有所帮助，但是在过去5年避免像瘟疫一样的表之后，我意识到有很多旧学校的实例在桌子上工作得非常好。过去的5个表单解决方案已经在表格中。就像你说的那样，它很“漂亮”而且没有太多额外的代码工作。

如果表格有效，请使用它。

无法将表格布局转换为DIV

4 个答案:

守则

HTML

CSS