CSS,HTML列表缩进

时间:2018-09-10 16:59:51

标签: javascript jquery html css

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

1.(缩进)所有日期/字段/等等等

2.(缩进)“全文查询”

3.(缩进)缩小搜索范围等

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

3 个答案:

答案 0 :(得分:0)

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

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

这将用于文本的第一行。 如果您希望整段内容都可以使用,可以将span元素转换为div

答案 1 :(得分:0)

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

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

style标签属于head部分(我在链接的小提琴的第20行放置了我的标签。)

我建议将一个类添加到您的li元素中,以便您只能更改所需的特定元素,而不是页面上的 all li元素。

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

答案 2 :(得分:0)

使用边距和填充,您可以拥有所需的压痕。我使用了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

中看到此示例