HTML 表单字段值对齐

Question

我有这个代码，

<span class='plabel'>Address</span> <span class='values'>: $address</span>

CSS 代码:

.plabel { 
display:inline-block; 
width:100px; 
}

.values {
margin-left:50px;
}

现在，当显示一个值时，该值将转到显示字段名称的字段。

例子，

Address : XXXX,
XXXX.

我想要它，

Address : XXXX,
          XXXX.

Answer 1

用 div 包裹 span 并为每个设置固定的 width 。然后使用 float 作为他们的位置。

html

<div class="holder">
    <span class='plabel'>Address</span>
    <span class='values'>: Sotiris Val, Heraklion Crete, Greece</span>
</div>

CSS

.holder{width:220px;overflow:hidden;}
.plabel {
    float:left;
    display:inline-block;
    width:100px;
}

.values {
    width:120px;
    float:right;
}

演示: http://jsfiddle.net/48RDZ/