CODEWITHSUNDEEP
htmlcss
user2133606
user2133606

Reputation: 347

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?

Upvotes: 4

Views: 169

Answers (3)

Armen Michaeli
Armen Michaeli

Reputation: 9140

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.

Upvotes: 4

Wouter J
Wouter J

Reputation: 41934

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/

Upvotes: 3

dsuess
dsuess

Reputation: 5347

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/

Upvotes: -1

Related Questions