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

您僅需要一個具有最大寬度且已校正垂直對齊的內聯塊元素。

標記片段：

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

樣式表摘要：

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

10em最大寬度是我選擇的示例值，請根據喜好進行調整。

Answer 2

使用定義列表（ <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 3

嘗試
ul li {
text-indent:-50px;
padding-left:50px;
}
具有負值的text-indent將第一行向左移動，而整個padding-left會將所有其他內容移回

這是http://jsfiddle.net/edv7d/