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

用span包裹div并为每个width设置固定float。然后使用<div class="holder"> <span class='plabel'>Address</span> <span class='values'>: Sotiris Val, Heraklion Crete, Greece</span> </div>作为他们的位置。

<强> HTML

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

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

<强> CSS

{{1}}

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

Answer 2

您的代码似乎很好。这是演示：http://jsfiddle.net/H2V7t/

<style type="text/css">
    .plabel {
display:inline-block;  
width:100px;
}

.values  {
margin-left:50px;
}

</style>
<div style="clear:both">
    <span class='plabel'>Address</span>  
    <span class='values'>: This  is the value number one on right cell</span>
</div>

<div style="clear:both">
    <span class='plabel'>Address</span>
    <span class='values'>: This is the value number two on right cell</span>
</div>

HTML表单字段值对齐

2 个答案: