HTML CSS - выравнивание текста для Li

Question

HTML

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

Как я могу это сделать?

Answer 1

Используйте список определений (<dl>) вместо неупорядоченного списка:

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

Теперь вы можете плавать как <dt> и <dd> влево, чтобы вывести их рядом друг друга, и вы можете дать <dd> определенную ширину.

Демо: http://jsfiddle.net/L4Zem/

Answer 2

попробовать
ul li {
text-indent:-50px;
padding-left:50px;
}
текст-отступ с отрицательным значением будет двигаться первая линия слева и вся обивка налево будет смещаться все остальное назад

вот http://jsfiddle.net/edv7d/

Answer 3

Элемент встроенного блока с установленной максимальной шириной и скорректированным вертикальным выравниванием - все, что вам нужно.

разметки фрагмент:

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

Stylesheet фрагмент:

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

Максимальная ширина 10em мой пример выбирается значение, настроить его в соответствии с предпочтениями.