Выравнивание поля формы 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>