Question

I just got another assignment for web design. And I was curios how to space text like this.

The issue here is not the heading nor the text on the left. I have problem with the time on the right. We are forbidden to edit html which looks like this:

<div class="oteviracka">
<h2>Otevírací doba</h2>
<p><strong>Po &ndash; Pá:</strong> 11:00 &ndash; 23:00</p>
<p><strong>So:</strong> 11:00 &ndash; 24:00</p>
<p><strong>So:</strong> 11:00 &ndash; 22:00</p>
</div>

I tried almost everything but the code was always “dirty” and I doubt it is done by the way I did it. (First-child spacing and so).

So my question is How to space text like using tab with CSS?

Answer 1

Use the rule display: inline-block on the strong elements. This rule is combination of inline but with the ability to specify a size:

p strong { 
    display: inline-block;
    width: 150px
    /* IE7 */
    *display: inline; 
    zoom: 1;
    /* IE7 */
}

​DEMO

Further reading:

• CSS Display rule (on SitePoint)