如何在 HTML 中在列表项目符号和文本之间创建空格?
htmlweb developmentfront end technology更新于 2024/6/6 22:04:17
我们使用 CSS padding-left 属性在项目符号和文本之间创建空格。该属性用于设置元素左侧的填充区域。
HTML 支持有序列表和无序列表，并且我们必须使用 <ul> 标签在 HTML 中创建无序列表。<ul> 标签定义无序列表。我们使用 <li> 标签来开始列表。
对于有序列表，我们必须使用 <ol> 标签在 HTML 中创建无序列表。<ol> 标签定义有序列表。我们使用 <li> 标签来开始项目列表。
语法
以下是在 HTML 中在列表项目符号和文本之间创建空格的语法。
padding-left: value in pixels;
示例 1
以下是在 HTML 中在列表项目符号和文本之间创建空格的示例。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ul > <li style="padding-left: 30px">Abdul</li> <li style="padding-left: 30px">Jason</li> <li style="padding-left: 30px">Yadav</li> </ul> </body> </html>
以下是上述示例程序的输出。
示例 2
另一个在 HTML 中在列表项目符号和文本之间创建空格的示例 -
<!DOCTYPE html> <html> <head> <title>HTML Lists</title> </head> <body> <h1>Developed Countries</h1> <p>The list of developed countries:</p> <ul style="list-style-type:disc"> <li style="padding-left:1em">US</li> <li>Australia</li> <li>New Zealand</li> </ul> </body> </html>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
