无法将表格布局转换为 DIV答案

【问题标题】：Can't convert Table layout to DIVs无法将表格布局转换为 DIV
【发布时间】：2012-01-21 17:25:50
【问题描述】：

我有一个非常简单的数据输入表格。只是带有输入的标签。但是我的标签是本地化的，所以我不知道不同语言的文本会有多长。这个问题很容易通过表格布局解决：

<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。当然，我可以为标签 div 的宽度设置一些较大的值，但我希望我的 UI 占用尽可能多的空间。有什么想法吗？

【问题讨论】：

你有设置宽度的容器吗？还是您的表单占用了页面上的所有空间？

标签： html css html-table

【解决方案1】：

真正获得一个漂亮的、可调整的布局的唯一方法是使用 CSS 中的表格布局，即使用@987654321 @、display: table-row 等。如何做到这一点可能很明显。但与 HTML 表格相比，它对浏览器的支持更有限。

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

【讨论】：

表格布局在表单中通常没有语义。视情况而定，通常有更好的解决方案。

【解决方案2】：

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）

【讨论】：

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

【讨论】：

【解决方案4】：

我不知道这是否对您有帮助，但是在过去 5 年避免像瘟疫这样的表格之后，我开始意识到有很多老式的实例可以很好地与表格配合使用。过去的 5 个表格解决方案中有 2 个在表格内。就像你说的，它很“漂亮”而且很整洁，没有很多额外的代码工作。

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

【讨论】：