Html 在div的侧面显示ul列表项目符号

我有一个div列表，每个元素中都有段落。我想将其视为无序列表，并在每个div的左侧显示一个自定义项目符号。但是，我将项目符号放在div的顶部

显示我的问题和我想看到的

---

如果这个html结构不可能实现这一点，我很高兴听到一些其他建议。

使用了

位置：绝对

：

ul{
宽度：300px；
列表样式：无；
填充：0；
}
李{
利润率：0.40px；
左侧填充：30px；
位置：相对位置；
}
李：以前{
内容：“+”；
右侧填充：30px；
显示：内联块；
位置：绝对位置；
左：0；
}

这不合适

还有什么东西想在这里

这就像其他想要在这里的东西一样

您可以使用绝对定位来实现这一点，但我通常更倾向于尽可能避免使用绝对定位

最后，我只是将div设置为与stright li标记相同的缩进，然后浮动+

ul{
宽度：300px；
列表样式：无；
}
李{
利润率：40像素；
左侧填充：0px；
}
li>div{左边距：40px；}
李：以前{
内容：“+”；
显示：块；
浮动：左；
右侧填充：30px；
}

这不合适

还有什么东西想在这里

这是预期的效果

我通常使用如下css hack，而不使用任何

或

仅使用div：

display: list-item;
list-style-type: circle; 

div.list-div{
显示：列表项；
左边距：1.3em；
列表样式类型：圆形；
背景：#ccc；
}

这不合适

还有什么东西想在这里
这不合适

还有什么东西想在这里

添加一个

浮动：左给你
li:before
css声明。
：before
选择器插入标记内容之前，而不是标记之前。如果使用浏览器的开发人员工具检查元素，您将看到
标记中的“+”

li:before {
  content: "+";
  padding-right: 30px;
  float: left;
}

我同意Scott的观点，浮动是一个更好的选择，其他方法倾向于用定位来打破布局

我想更详细地说明为什么李：before把它放在上面，这是因为从技术上讲，你想要它，在你的情况下，放在段落前面，所以
p:before
会像下面所示那样工作


ul{
宽度：600px；
列表样式：无；
}
李{
边际：0px；
左侧填充：0px；
}
li>div{左边距：0px；}
p:以前{
内容：“+”；
左边距：-18px；
右边填充：10px；
}


我是一个段落

这就是为什么p:before有效，而不是li:before

这是预期的效果
很高兴能帮助您解决问题！：）它与较旧的浏览器兼容吗？@Simoroshka，请访问bootstrap了解有关浏览器兼容性的更多信息。在这里，自定义列表类型如何？@Simoroshka，您可以在这里看到自定义
列表样式类型
左浮动
，就像其他答案将在rescue中出现一样：）因为我仍然不完全理解绝对/相对定位是如何协同工作的，我倾向于同意。这是一个非常直观的方式，我将使用它，谢谢！