用于表式“标签-值”对齐的HTML和CSS

问题描述

|| 好吧，这很尴尬。我几乎想使用TABLE，但是我认为这是错误的。基本上，我有一个页面带有fieldset，在\“ Edit Mode \”中有很多输入，如下所示：

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

当此页面处于“只读”模式时，“ 2”变成一个范围，例如

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

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

---------------------------
Name       1 the test
           Addresstown
           UK
---------------------------

在表中这将是显而易见的：

<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下方跨度直接从ѭ4beneath开始我得到一个很好的表格布局，但是我必须指定跨度的宽度，我不想这样做。有任何想法吗？

解决方法

根据我上面的评论，使用表格进行表格布局没有任何问题！但是，如果您确实不想使用表格，则可以将跨度设置为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>