HTML 无序列表格式

Question

如何将 HTML 中的无序列表格式化为如下所示？

• 第 1 项 - 这是对
  的描述 第一项

Answer 1

试试这个方法。

更新

自从我们在 li 中添加了display: flex，它的默认显示样式就被打断了。因此，我们可以使用伪元素的解决方法，因为我已经更新了 sn-p

ul {
  padding-left: 10px;
}

li {
  display: flex;
}

li::before {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #000;
  margin-right: 20px;
  margin-top: 3px;
}

.title {
  font-size: 16px;
}

.desc {
  flex: 1;
}

<ul>
    <li>
        <span class="title">Title - </span>
        <span class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis magnam facilis aut quos officiis. Blanditiis, facilis itaque. Reiciendis a sapiente nulla qui dolorum, magnam accusamus, sit perspiciatis officia quisquam autem!</span>
    </li>
    <li>
        <span class="title">Title - </span>
        <span class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis magnam facilis aut quos officiis. Blanditiis, facilis itaque. Reiciendis a sapiente nulla qui dolorum, magnam accusamus, sit perspiciatis officia quisquam autem!</span>
    </li>
    <li>
        <span class="title">Title - </span>
        <span class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis magnam facilis aut quos officiis. Blanditiis, facilis itaque. Reiciendis a sapiente nulla qui dolorum, magnam accusamus, sit perspiciatis officia quisquam autem!</span>
    </li>
</ul>