如何控制项目符号和< li>元素之间的间距

一个列表是一组相关信息的简短片段，可以用来在网页上以有序或无序的格式显示数据或信息。HTML列表用于指定信息列表。所有列表都可以有一个或多个列表元素。HTML列表有三种类型：

有序或编号列表（ol）： 使用数字方案列出项目。
无序或项目符号列表（ul）： 使用普通项目符号列出项目。
定义列表或描述列表（dl）： 用字典格式排列项目。

我们可以通过在HTML中创建无序列表来制作HTML项目符号。在HTML中，无序列表也被称为项目符号列表，是一种常见的HTML列表类型。与有序列表不同，您可以在HTML中使用项目符号列表来列出不需要按照顺序列出的项目。

在无序列表中创建HTML项目符号

要在无序列表中创建HTML项目符号，我们必须使用两个不同的标签。首先，我们必须使用<ul>...</ul>标签将文本包装起来，以创建项目符号列表。其次，我们必须使用<li>...</li>标签来包围列表中的每个行项目。在创建HTML项目符号时，我们有三种格式选项可供选择。

我们可以选择使用圆圈、方块或实心点进行标记。样式属性用于指定项目符号的样式。然后，我们必须将其值设置为”list-style-type:format”，其中format可以是circle、square或disc。我们必须将’style’属性放在<ul>开始标签中。

考虑以下带有默认间距的简单无序列表。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>How to Control the Space Between Bullets and <li> Elements </title>
   </head>
   <body>
      <h3>Seven Wonders of the World</h3>
      <ul>
         <li>The Great Wall of China</li>
         <li>Chichen Itza</li>
         <li>Christ the Redeemer</li>
         <li>Matchu Picchu</li>
         <li>Petra</li>
         <li>Taj Mahal</li>
         <li>Colosseum</li>
      </ul>
   </body>
</html>

在本文中，我们将讨论一些方法，可以帮助控制项目符号和列表元素之间的间距。

使用Span元素

< span>标签是一个内联容器，用于标记一段文本或文档的一部分。使用class或id属性，可以轻松地使用CSS对<span>标签进行样式设置或使用JavaScript进行操作。它类似于<div>标签，但是<div>是一个块级元素，而<span>是一个内联元素。以下是语法：

<span class="">Some Text</span>

示例

以下示例显示如何通过将列表文本插入span标签中来更改项目符号和列表元素之间的间距。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Control the Space Between Bullets and <li> Elements</title>
    <style>
      body{
          background-color:lightyellow;
          margin-left:200px;
          margin-top:100px;
      }
      li {
        color: slategrey;
      }
      span {
        position: relative;
        left: -10px;
      }
    </style>
  </head>
  <body>
    <h3>Seven Wonders of the World</h3>
    <ul>
      <li>
        <span> The Great Wall of China</span>
      </li>
      <li>
        <span>Chichen Itza</span>
      </li>
      <li>
        <span>Christ the Redeemer</span>
      </li>
      <li>
        <span>Matchu Picchu</span>
      </li>
      <li>
        <span>Petra</span>
      </li>
      <li>
        <span>Taj Mahal</span>
      </li>
      <li>
        <span>Colosseum</span>
      </li>
    </ul>
  </body>
</html>

使用Padding-left属性

padding 是元素内容和其边框之间的空间。它在元素内部创建额外的空间，而margin则在元素周围创建额外的空间。padding-left属性指定元素的左填充（空间）。

语法

以下是语法

padding-left: length|percentage|initial|inherit;

示例

在这个例子中，我们将看到如何调整列表元素的填充来控制项目符号和文本之间的间距。项目符号会根据文本的大小进行缩放。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Control the Space Between Bullets and <li> Elements</title>
    <style>
      body{
          background-color:lavender;
          margin-left:200px;
          margin-top:100px;
      }
      div ul li {
        padding-left: 40px;
        color:darkblue;
        background-color:lightcyan;
      }
      div p{
          font-size:20px;
          font-weight:600;
          background-color:white;
          width:300px;
          text-align:center;
      }
      div ul{
          padding-left:70px;
          background-color:azure;
          width:230px;
      }
    </style>
  </head>
  <body>
    <div>
    <p>Factors of Good Health</p>
    </div>
    <div>
    <ul>
      <div>
      <li>The Great Wall of China</li>
      <li>Chichen Itza</li>
      <li>Christ the Redeemer</li>
      <li>Matchu Picchu</li>
      <li>Petra</li>
      <li>Taj Mahal</li>
      <li>Colosseum</li>
      </div>
    </ul>
    </div>
  </body>
</html>

在这种方法中，我们必须记住弹珠和文字必须是相同的颜色。此外，我们不能将弹珠移动得比浏览器的默认位置更接近文字，并且我们无法控制弹珠的垂直定位。