如何在 CSS 中移动项目符号？

Question

我一直在使用以下内容并试图抓住要点：

 #list { text-align: center; }

 <div id="list"> <ul> <li>listitem1</li> <li>listitem2</li> </ul> </div>

并尝试了一些其他技术，例如尝试减少填充/边距，但似乎无法找到答案。

Answer 1

HTML列表具有用于在项目中放置项目符号的属性：

#list {
  text-align: center;
  list-style-position: inside;
}

有关更多信息， 请访问： https : //developer.mozilla.org/en-US/docs/Web/CSS/list-style-position

Answer 2

将这行代码添加到CSS

#list {
 list-style-position: inside;
 text-align: center;
}

Answer 3

 #list { list-style-position: inside; list-style-type: circle; } 

 <div id="list"> <ul> <li>listitem1</li> <li>listitem2</li> </ul> </div> 

Answer 4

ul {
    text-align: center;
    list-style-position: inside;
}

Answer 5

警告：仅适用于无序列表 ( <ul> ) 不适用于有序列表 ( <ol> )。

我也遇到了这个问题，所以我开始跳出框框思考。

基本上，我的解决方案是创建我自己的<div>标签，它将替换列表项样式。 每个<li>标签都包含一个项目符号设计（ <div class="custom-bullet"> ）和一些文本（ <p> ）。 这样我就可以使用flex和其他 CSS 属性轻松地移动东西。

以下代码使用 flex垂直对齐自定义项目符号和段落文本。

带 CSS 的 HTML

<ul>
    <li>
        <div class="custom-bullet"></div>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, dolore.
            Fugit labore aperiam ad, aliquid perferendis ullam quos doloribus nam
            nesciunt quae laborum quod iste recusandae accusamus tempora numquam!
            Nihil?
        </p>
    </li>
    <li>
        <div class="custom-bullet"></div>
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur,
            officia recusandae. Reiciendis, eos. Rem perspiciatis eius sapiente ipsa
            dolor in architecto sit sint, neque tempora, magni consequuntur ut.
            Quaerat, provident.
        </p>
    </li>
</ul>

<style>
    ul {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    li {
        list-style: none;
        display: flex;
        flex-direction: row;
    align-items: center;
    }

    li p {
        margin-left: 2rem;
    }

    .custom-bullet {
        position: absolute;
        width: 1rem;
        height: 1rem;
        background-color: gray;
        border-radius: 20px;
        margin: 0;
        padding: 0;
    }
</style>