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>
精彩评论