I would like to align a few line of text about the colon in each line. So I have this:
aaa:111
bbbbbbb:22222
cccccccccc:33333333
dd:44
eeee:5555
I want them to align about the colon:
aaa:111
bbbbbbb:22222
cccccccccc:33333333
dd:44
eeee:5555
So far I can manage it with a table and two columns, the left column text-align:right, and the right column text-align left. But I am so sure that there are much more elegant solutions than this. -- Any ideas?
Thanks!
First, you go to the "View", then click on the ruler. Click the "L" like symbol continually until it becomes a upside down "T" with a dot on its right, move the ruler to the position you like to place the colon. Click "Tab" at the left of the colon and the colon will move to that position.
To align text on a webage, we can use the style attribute and the property text-align. To align your HTML content to the left or right, you would replace center with left or right .
An easy and semantic way would be to use a definition list:
Demo
* {
margin: 0;
padding: 0;
}
dt {
display: block;
float: left;
width: 100px;
text-align: right;
}
dt:after {
content: ':';
}
dd {
display: block;
}
<dl>
<dt>aaa</dt>
<dd>111</dd>
<dt>bbbbbbb</dt>
<dd>22222</dd>
<dt>cccccccccc</dt>
<dd>33333333</dd>
<dt>dd</dt>
<dd>44</dd>
<dt>eeee</dt>
<dd>5555555</dd>
</dl>
You have to make sure that whatever wraps those two classes has enough room here - 300px + any padding or margin.
.label-wrap {
width: 150px;
text-align: right;
float: left;
}
.info {
width: 150px;
float: left;
text-align: left;
}
<div class="label-wrap">aaa:</div>
<div class="info">111</div>
If your data is tabular data, then your approach with using tables is an acceptable one.
However an alternative would be to use HTML spans:
See fiddle: http://jsfiddle.net/F2PRN/1/
span {
width: 100px;
clear: left;
float: left;
text-align: right;
padding-right: 2px;
}
<p>
<span>aaa:</span>111
</p>
<p>
<span>bbbbbbb:</span>22222
</p>
<p>
<span>cccccccccc:</span>33333333
</p>
with arbitrary value length, a table would be the only way to do it
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With