formulaire HTML alignement Valeur du champ

Question

J'ai ce code,

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

Le code CSS:

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

.values { 
margin-left:50px; 
} 

Maintenant, quand une valeur est affichée la valeur passe dans le champ où est affiché le nom du champ.

Exemple,

Address : XXXX, 
XXXX. 

Je veux que ce soit,

Address : XXXX, 
      XXXX. 

Answer 1

Enroulez le span avec un div et ensemble fixe width pour chacun. Ensuite, utilisez float pour leur position.

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; 
} 

Démo:http://jsfiddle.net/48RDZ/

Answer 2

Votre code semble bien. Voici une démo: 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>