html - 无法将表格布局转换为 DIV

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

Answer 1

真正获得类似于 HTML 表格的漂亮、可调整布局的唯一方法(这里语义正确，如果有人关心这个)是在 CSS 中使用表格布局，即使用 display: table、display: table-row 等。如何做到这一点可能很明显。但与 HTML 表格相比，它的浏览器支持更为有限。

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