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

包住span與div和組固定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/

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>