html - 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

尝试 使用负值的 text-indent 会将第一行向左移动，整个 padding-left 会将其他所有内容移回
ul li {
text-indent:-50px;
padding-left:50px;
}

这是一个http://jsfiddle.net/edv7d/