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中看到此示例