在两个单独的块中显示名称和值

Question

在下面的html中，“罗马”出现在第二行的“地方”下方，我该如何预防呢？

http://jsfiddle.net/JqxTx/21/

谢谢， 克里斯。

Answer 1

我会将span更改为p之类的块元素，然后将样式更改为

div label {
    float: left;
}
div p {
    margin-left: 40px;    
}

• DEMO

Answer 2

您可以使用hanging line indent或CSS3 columns，但就后者而言，您必须就这些情况下它们是否有用进行调查。

我通常选择旧式的

<table>
    <tr>
        <td><label>Label</label></td>
        <td><span>Text</span></td>
    </tr>
</table>

因为它很简单，所以它有效，虽然有一些冗余代码，但它不会促进嵌套，并且它不是那么大的混乱。 我仍然没有看到任何好的，简单的等效CSS替换此布局方案。 最好的可能是

<label style="float: left; width: 20%;">Label</label>
<span style="float: left; width: 80%;">Text</span>

或

<label style="position: absolute; width: 20%;">Label</label>
<span style="display:block; padding-left: 20%;">Text</span>

您可以找到更多here或the answer to this question。 但它们不如桌子好，因为它们不适应第一栏的内容。

像

这样的黑客

<label style="float:left; height: 2em;">Label</label>
<span>Text</span>

或

<label style="display:block; float:left;">Label</label>
<span style="display:block; float:left; width:90%;">Text</span>

工作，但我不推荐它们，因为它们都依赖于某些屏幕尺寸。

G'luck。

Answer 3

http://jsfiddle.net/paislee/JqxTx/22/ 认为这将有效，因为我把它分成两个块。

Answer 4

只需使用表格：

<table><tr valign=top><td>Place <td>Rome Rome ... Rome</table>

你可能有几个名字/价值对，然后他们就成了一个很好的桌子。