CODEWITHSUNDEEP
htmlcss
OMGtechy
OMGtechy

Reputation: 8220

Inserting tab spaces to align text vertically in HTML/CSS

I am not sure how to get the following behaviour using a combination of HTML and CSS:

foo    = this
foobar = bit
goso   = needs
etcetc = aligning

Now I could just insert spaces where required (like I did above), but I'm pretty sure there must be a way to do this "automatically".

I know I could use tables to do this, but would prefer not to. Is there any other way of doing this?

My question boils down to this: How do I automatically align text vertically, in a similar way to tabs in office suites, using HTML/CSS.

Here is an in context example:

<p><span class="a">foo</span> <span class="b">=</span> <span class="c">"abcDeveloper"</span></p>
<p><span class="a">bar</span> <span class="b">=</span> <span class="c">"123"</span></p>
<p><span class="a">foobar</span> <span class="b">=</span> <span class="c">"dfg"</span></p>
<p><span class="a">foobarstar</span> <span class="b">=</span> <span class="c">"456"</span></p>

In this example, I would like text in class b to be aligned vertically.

Thank you in advance!

Upvotes: 22

Views: 27940

Answers (2)

codingpirate
codingpirate

Reputation: 1414

Add css attribute display: inline-block and min-width: XXXpx

Upvotes: 4

Stuart Kershaw
Stuart Kershaw

Reputation: 17671

One method would be to apply display: inline-block; to your span.as, and then give them a set width: http://jsfiddle.net/nzrHn/1/

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

Upvotes: 29

Related Questions