How to space text like using tab on website?


Tags: html,css

Problem :

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

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?



Solution :

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 Howto..

    How to tell what in CSS files that is not used? [duplicate]

    CSS preprocessors workflow - how does it really work?

    how to align an element but keep the space it left reserved

    How do you create different CSS for dynamically generated elements?

    how to make a timeline using html, css, javascript?

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?

    How to animate DOM elements with JavaScript/CSS

    How can I “display:none” to some adjacent text with CSS?

    How to hide div for specific height or width using CSS [duplicate]

    How to have a textbox with label inside it support 'tap to paste' feature in iPad?

    How do I center a Bootstrap div with a 'spanX' class?

    How to make css two borders?

    html, css - how to use display: inline-block

    How to make a layout scale with CSS?

    how to remove space from html using bootstrap

    how to make slide animation?

    How to load Different css everytime onload

    CSS - How do I get my list element to fill 100% of the block

    How to remove default chrome style for select Input?

    How to align a label to the “BOTTOM” of a div in CSS?

    How Does CSS Opacity Work When Adding Class?

    How to change when Jquery edits my CSS upon reaching an anchor point?

    How to re-animate CSS3 animations on class change

    How do I display an empty div tag with CSS?

    How to detect which button is clicked in javascript?

    How to make attractive dropdown menu using css3? [closed]

    How can I remove a bootstrap buttons hover effect?

    how create triangle using css [duplicate]

    How to make div blocks not floating using CSS?

    How to horizontally center text in bootstrap button?