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

您只需要一个设置了最大宽度和更正垂直对齐方式的行内 block 元素。

标记片段:

<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 最大宽度是我选择的示例值，根据喜好调整。