Best way to align left after line break

Question

As you see, I need to align text after line break.

First I tried table. but as you see each item has different width(like note, humidity...). So I had to make each table to each item. I don't think it's right.

And I tried this.

li.list {
    padding-left: 3.5em;
    text-indent: -3.5em;
}

It seemed work but the exact em showed different spaces by different browsers(including mobile). Meaning that I couldn't make it compatible.

I hope there's a neat and simple way to solve it..

Answer 1

Solution #1:

Fiddle:
http://jsfiddle.net/38GpE/2/

CSS:

.pretext
{
    font-weight:bold;
    display:inline-block;
    vertical-align:top;
}

.text
{
    width:300px;
    display:inline-block;
}

HTML:

<ul>
    <li>
        <div class="pretext">Something: </div>
        <div class="text">
            ...text...
        </div>
    </li>
</ul>

The obvious problem is the <li> bullet point... In your example, it looks like you might be able to just use list-style:none; to hide the bullet, and use a - (minus symbol).

If that won't suffice, hiding the bullet point and positioning a background: url(mybullet.png) no-repeat left top; might work.

---

Solution #2:

Another solution using display:table-cell, but keep in mind this isn't supported in IE7. The benefit of this though is that you don't have to define a width of the 2nd column.

Fiddle:
http://jsfiddle.net/38GpE/3/

CSS:

.pretext
{
    font-weight:bold;
    display:table-cell;
    vertical-align:top;
    white-space:nowrap;
}

.text
{
    display:table-cell;
}

---

Solution #3:

You said, in the comments, that you don't need to use a <li>. It's a pain, but could you not just define a table for each item?

Fiddle:
http://jsfiddle.net/zuPcx/

HTML:

<table>
    <tr>
        <td class="pretext">Something:</td>
        <td>{your text}</td>
    </tr>
</table>

<table>
    <tr>
        <td class="pretext">Something else:</td>
        <td>{your text}</td>
    </tr>
</table>

CSS:

.pretext
{
    font-weight:bold;
    display:table-cell;
    vertical-align:top;
    white-space:nowrap;
}

.text
{
    display:table-cell;
}