CSS，HTML列表缩进

Question

我对HTML还是很陌生，在按自己的喜好正确格式化列表时遇到了很多麻烦。 在当前代码中，我有一个编号列表。 我的目标是在数字本身和后面的文本之间创建缩进或空格。 例如：

1.（缩进）对于所有日期/字段/等

2.（缩进）“全文查询”

3.（缩进）缩小搜索范围等

我尝试搜索有关w3schools和其他StackOverflow帖子的技巧，但似乎找不到解决方案。 我认为这是由于有一个列表而不是段落之类的常规文本。 任何帮助，将不胜感激。

Answer 1

由于示例中每个项目的文本都包含在span ，因此可以为每个span设置样式。

例如，我在代码的第一项中添加了padding-left: 30px ： https : //jsfiddle.net/02xbseuo/

这将用于文本的第一行。 如果要使用整个段落，可以将span元素转换为div 。

Answer 2

像这样使用text-indent规则（另请参见我稍作改动的JSFiddle ：

<style type="text/css">
  li {
    padding-right: 5px;
  }
</style>

style标签属于head （我将我放在链接的小提琴的第20行上）。

我建议向您的li元素添加一个类，以便您可以仅更改所需的特定元素，而不是页面上的所有 li元素。

另外，您也没有问这个问题，但总的来说，我建议您避免使用内联样式。 一旦页面变大，它们将很难维护，修改每个内联样式将花费更长的时间，并可能导致其他错误。

Answer 3

使用边距和填充，您可以拥有所需的压痕。 我使用10px，但是您可以输入解决方案所需的任何值。

HTML代码

<ol> <li>element 1 </li> <li>element 2</li> <li>element 3 </li> <li>element 4</li> </ol>

CSS代码

ol li {margin-left: 10px; padding-left: 10px;}

您可以在JSFiddle中看到此示例