开发者

HTML Form Field value alignment

开发者 https://www.devze.com 2023-03-20 15:33 出处:网络
I have this code, <span class=\'plabel\'>Address</span> <span class=\'values\'>: $address</span>

I have this code,

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

The CSS code :

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

.values {
margin-left:50px;
}

Now when a value is displayed the value goes to the field where the field name is displayed.

Example,

Address : XXXX,
XXXX.

I want it to be,

Address : XXXX,
          XX开发者_Go百科XX.


wrap the span with a div and set fixed width for each one. Then use float for their 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;
}

Demo: http://jsfiddle.net/48RDZ/


Your code seems fine. Here is demo: 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>
0

精彩评论

暂无评论...
验证码 换一张
取 消