HTML CSS - li元素的文本对齐方式

Question

HTML

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

我该如何完成这个任务？

- user2133606

---

你能编辑HTML吗？ - Graham

@Graham 是的，你可以编辑任何东西。我只是想让它看起来排列得很好看。 - user2133606

你在这里想做什么？为什么要使用列表？这看起来像是一个标题后面的段落或多个段落。我理解得对吗？ - Armen Michaeli

@amn 好的，我正在列举一张包含一些信息的章节表。我还在学习过程中，所以我不确定哪种方法是目前最好的。我打算使用一张表来代替。 - user2133606

你的意思是想要构建一个目录（Table Of Contents），就像书的开头或结尾一样吗？ - Armen Michaeli

Answer 1

一个设置了最大宽度并修正了垂直对齐方式的 inline-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 最大宽度是我选择的示例值，根据需要进行调整。

- Armen Michaeli

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/

- Wouter J

---

@veelen，是的：“名称-值组可以是术语和定义、元数据主题和值、问题和答案，或任何其他名称-值数据组。”（http://www.w3.org/TR/html5/grouping-content.html#the-dt-element） - Wouter J

但是在这里使用一个标题不更合适吗？在这种情况下，值并没有说明名称，名称也没有说明值。 - veelen

我们不知道这个值包含什么，但我假设它是章节的一些小总结。然后，它肯定涉及到名称。 - Wouter J

Answer 3

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

这里是http://jsfiddle.net/edv7d/。

- dsuess

---

但是你需要猜测“第一章”的宽度。 - RichieHindle

假设 list-style-position 是在外部而不是内部。 - lpd

你们两个都是对的，如果将无序列表更改为语义上更正确的标签，如dt、dd，会更好。 - dsuess