用于类似表格的“标签 - 值”对齐的 HTML 和 CSS答案

【问题标题】：HTML and CSS for table-like 'Label - Value' alignment用于类似表格的“标签 - 值”对齐的 HTML 和 CSS
【发布时间】：2011-05-25 18:25:46
【问题描述】：

好吧，这很尴尬。我几乎很想使用 TABLE，但我认为这是错误的。

基本上，我有一个带有fieldset 的页面，在“编辑模式”下有一堆这样的输入：

<label for="txtName">Address</label>
<textarea name="Name" id="txtName">
    1 The test
    AddressTown
    UK
</textarea>

当此页面处于“只读”模式时，textarea 变成一个跨度例如

<label>Address</label>
<span>
    1 The test<br />
    AddressTown<br />
    UK
</span>

我想以表格方式放置标签和值，以便每个 label 都在左侧，宽度固定，input 或 span 如下所示：

---------------------------
Name       1 the test
           AddressTown
           UK
---------------------------

这在 TABLE 中是不费吹灰之力的：

<table>
<tr>
    <th style="width: 150px; vertical-align: top;">
        <label>Address</label>
    </th>
    <td>
        <span>
        1 The test<br />
        AddressTown<br />
        UK
        </span>
    </td>
</table>

但是我一直在尝试使用 CSS 来实现这一点，仅在 label 和两者上都使用 float，但无论我尝试什么，我都处于以下情况之一：

span 的第二行在label 下方换行
跨度从label 的正下方开始
我得到了一个不错的表格布局但是我必须指定跨度的宽度，我不想这样做。

有什么想法吗？

【问题讨论】：

HTML 5 中仍然存在表格是有原因的。对于表格布局，使用表格没有任何问题！

标签： html css tablelayout

【解决方案1】：

根据我上面的评论，使用表格进行表格布局没有任何问题！但是，如果您真的不想使用表格，可以将 span 设置为 display: block 并给它一个边距。

<!DOCTYPE html>
<html>
    <label>Address</label>
    <span>
        1 The test<br />
        AddressTown<br />
        UK
    </span>

    <style>
        label { float: left; width: 200px; }
        span { margin-left: 200px; display: block; }
    </style> 
</html>

【讨论】：

不错的一个。我想我被“桌子是邪恶的”棍子打得太多了。