Question

我在格式化有序列表后出现的某些文本时遇到了一些问题。列表后面的文本不再缩进。为什么会发生这种情况？我该如何解决？

这是我的HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Practice Site</title>
        <link rel="stylesheet" type="text/css" href="prac_style.css">
  </head>
  <body>
    <h1>Practice Website</h1>
    <div id="content">
    <div class="post">
    <p>
    List of things:
    <ol>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ol>
    Text after list.
    </p>
    </div>
    </div>
  </body>
</html>

这是我的CSS：

body {
  margin: 0;
  background: #FFEEEB;
  font-family: verdana, sans-serif;
  font-size: 0.85em;
}

p {
  line-height: 1.5em;
  text-align: justify;
}

#content {
  float: left;
  width: 700px;
  margin-right: 20px;
}

#content .post {
  background: #FFF;
  padding: 10px;
  margin-bottom: 20px;
  border: 2px solid #CCC;
}

#content .post p {
  margin: 10px 20px;
}

Answer 1

我认为原因是您的HTML格式不正确。您不应将<ol>列表包含在标记内。另外，我建议您也关闭打开的<li>标记。

请尝试使用此HTML：

<body>
    <h1>Practice Website</h1>
    <div id="content">
        <div class="post">
            <p>List of things:</p>
            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ol>
            <p>Text after list.</p>
        </div>
    </div>
</body>

Answer 2

您的问题是浏览器会在之前自动结束<ol>标记。这有点像你没有结束你的<li>标签，因为你知道它们会自动结束。（顺便说一句，这不是正确的方式。）

要解决此问题，只需填写“事项列表：＆＃39;和列出后的文字。＆＃39;在他们自己的标签中，如下所示：

<p>List of things:</p>
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
<p>Text after list.</p>

如果您使用Chrome浏览器我们的其他浏览器＆＃39;检查元素＆＃39;，请使用它，您将看到我的意思。

Answer 3

列表默认情况下会获得填充，其他元素则不会。您需要将相同的填充应用于标记，以便它们对齐，或重置填充和<ol>的列表样式位置。

另外，不要在<ol>内嵌套，这是不允许的。并关闭<li>代码（</li>）。虽然我不认为它在HTML5中是必需的，但这是最好的做法。

尝试：

<h1>Practice Website</h1>
<div id="content">
  <div class="post">
    <p>List of things:</p>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
    <p>Text after list.</p>
  </div>
</div>

要重置列表缩进，请使用：

ol {
  list-style-position: inside;
  padding: 0;
}

如果希望整个块缩进，则可以控制父<div>上的填充。

<强> Demo

列表后格式化重置

3 个答案: