jean
jean

Reputation: 1013

lining up text in html/css

I am trying to line up all the #comments so that they all start from the same distance, from the first #comment to the last #comment.

This is what my code looks like http://jsfiddle.net/#&togetherjs=7C48oh5dl7

I have tried making each comment into a span and adding a text-indent, but as you can see this does not seem to work.

I have also tried adding a padding/margin on the span but it distorts the appearance.

HTML code

    <p id="var_ex"> x = 2 <span style="display:inline-block; text-indent: 70px;"> # stores the value 2 into x</span> </p>
    <p id="var_ex"> x,y = 2,3 <span style="display:inline-block; text-indent: 70px;"> # assigns 2 and 3 to x and y, respectively</span> </p>
    <p id="var_ex"> myText = "This is a string" <span style="display:inline-block; text-indent: 70px;"> # assigning a variable to a string</span> </p>
    <p id="var_ex"> myList = [2,3,4,5]<span style="display:inline-block; text-indent: 70px; "> # assigning a variable to a list/array</span> </p>
    <p id="var_ex"> fahrenheit =  celsius*(9.0/5.0) + 32 <span style="display:inline-block; margin-left:300px;"> #using mathematical expresions</span> </p>

Upvotes: 2

Views: 492

Answers (1)

Alexander Bell
Alexander Bell

Reputation: 7918

You can achieve it by using <table> element as shown in the following demo sample pertinent to your case:

<table>
    <tr>
        <td width=30%>
            x = 2
        </td>
        <td width=70%>
            # assigns 2 and 3 to x and y, respectively
        </td>
    </tr>
    <tr>
        <td>
            x,y = 2,3
        </td>
        <td>
            # assigning a variable to a list/array
        </td>
    </tr>
</table>

You can specify the column width either in absolute (px), or relative units (%).

For more information on <table> formatting with CSS3 (in particular, using header cell tag <th>, also <thead>, <tfoot> and <tbody> section elements, you can refer to the article:

HTML5 Tables formatting: alternate rows, color gradients, shadows (http://www.codeproject.com/Tips/262546/HTML-Tables-formating-best-practices)

Best Regards,

Upvotes: 1

Related Questions