html css - Text alignment for li

Question

HTML

<ul>
    <li>Chapter One - This is chapter one text text text text text text text text</li>
</ul>

How can I accomplish this?

Answer 1

An inline-block element with a set maximum width and corrected vertical alignment is all you need.

Markup snippet:

<ul>
    <li>Chapter One - <span class="desc">This is chapter one text text text text text text text text</span></li>
</ul>

Stylesheet snippet:

span.desc {
    display: inline-block;
    max-width: 10em;
    vertical-align: top;
}

The 10em maximum width is my chosen example value, adjust it according to preference.

Answer 2

Use a definition list ( <dl> ) instead of an unordered list:

<dl>
    <dt>Chapter One</dt>
    <dd>This is chapter one text text text text text text text text</dd>
</dl>

Now you can float both <dt> and <dd> left to bring them next to eachother and you can give <dd> a specific width.

Demo: http://jsfiddle.net/L4Zem/

Answer 3

try
ul li {
text-indent:-50px;
padding-left:50px;
}
text-indent with negative value will move first-line left and whole padding-left will shift everything else back

here is a http://jsfiddle.net/edv7d/