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 do this?

Answer 1

Use the definition list ( <dl> ) instead of the 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 put both <dt> and <dd> left to bring them next to each other, and you can specify a <dd> specific width.

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

Answer 2

A recessed element with maximum width and adjusted vertical alignment is all you need.

Fragment Mark:

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

Style shots:

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

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

Answer 3

to try
ul li {
text-indent:-50px;
padding-left:50px;
}
a text-indent with a negative value will move the first line to the left, and the entire padding-left will move everything else back

here http://jsfiddle.net/edv7d/