html - html css ol 垂直

Question

我写了一段代码：

<p> 
    Example:
</p>
<ol>
    <li>Text 1</li>
    <li>Text 2</li>
</ol>

这需要将我的文本垂直设置在彼此下方

但它给我的输出是我的文本是相互覆盖的，所以不是垂直的，而是在一行上。

我需要这样的：

<p> 
    Example:
</p>
<ol>
    <li>Text 1</li>
    <li>Text 2</li>
</ol>

现在是这样的：

Answer 1

这可能是一个评论。但我想我可以指导你并解释更多。

该问题仅包含没有出现问题的 HTML 标记。很好。问题在于CSS，这是表示样式。所以，这与CSS有关。

我从您的屏幕截图中感受到的是，可能有一个带有规则的 CSS：

* {line-height: 0;}

这可能是一个错误，或者由于某些原因，它被覆盖了。您需要通过以下任一方式重置这些值：

• 使用 CSS 重置 - Eric Meyer、简单重置或 YUI 重置。

• 如果是简单重置，你可以给出这个规则：

  * {margin: 0; padding: 0; line-height: 1.2em;}
  

  这line-height是针对您的特定情况的。

• 并确保将自定义 CSS 放在最后，以便它有效并覆盖所有其他样式。

希望你能完成它。

Answer 2

尝试使用：

li {
    float: none;
    dispaly: block;
    clear: both;
}