Home > Web Front-end > CSS Tutorial > How Can I Control the Spacing Between Bullets and List Items in CSS?

How Can I Control the Spacing Between Bullets and List Items in CSS?

Linda Hamilton
Release: 2024-12-11 15:39:16
Original
346 people have browsed it

How Can I Control the Spacing Between Bullets and List Items in CSS?

CSS: Regulating the Distance Between Bullets and List Items

Problem:

Adjusting the horizontal spacing between bullets and their corresponding

  • elements within an ordered or unordered list poses a challenge. To illustrate, consider the following:

    * Some list text goes
       here.
    Copy after login

    Desired Outcome:

    Modify the space to obtain:

    *         Some list text goes
              here.
    Copy after login

    or

    *Some list text goes
     here.
    Copy after login

    Solution:

    Enclose the list item's content within a span element with relative positioning. The left property of the span can be manipulated to control the desired spacing.

    li span {
      position: relative;
      left: -10px;
    }
    Copy after login
    <ul>
      <li><span>item 1</span></li>
      <li><span>item 2</span></li>
      <li><span>item 3</span></li>
    </ul>
    Copy after login

    The above is the detailed content of How Can I Control the Spacing Between Bullets and List Items in CSS?. For more information, please follow other related articles on the PHP Chinese website!

  • source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template