user2133606 user2133606 - 4 months ago 23
CSS Question

html css - Text alignment for li

HTML

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


actual result

How can I accomplish this?

Answer

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/