CSS,HTML 列表缩进



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

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

2.(缩进("全文查询">

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

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

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

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

这将意图文本的第一行。 如果要意图整个段落,可以将span元素转换为div

像这样使用text-indent规则(另请参阅我略微更改的JSFiddle:

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

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

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

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

使用边距和填充,您可以获得所需的缩进。我使用了 10px,但您可以输入解决方案所需的任何值。

网页代码

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

云麒麟代码

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

您可以在 JSFiddle 中看到此示例

最新更新