将列表样式添加到p标记

Question

我知道这看起来很傻，但我正在尝试将列表样式添加到p标签中。我不能把它们放在li标签中，因为php是如何循环的。所以我很难尝试将它们设计成一个列表。

我尝试过这样的事情

.taskSubList{
  text-indent:2em;
  list-style-type:disc;
  display:list-item; 
}

但我似乎无法让它发挥作用。有什么想法吗？

jsFiddle

Answer 1

这个“不起作用”的原因是因为默认list-style-position超出了应用list-style-type计数器的元素;根据定义，这意味着它在元素的左边缘之外。因此，如果您指定margin-left（足够大的数字），它就能完美运行：

p {
    text-indent:2em;
    list-style-type:disc;
    display:list-item;
    margin-left: 2em;
}

JS Fiddle demo

或者，如果您指定list-style-position: inside， 也可以

。

p {
    text-indent:2em;
    list-style-type:disc;
    display:list-item;
    list-style-position: inside;
}

JS Fiddle demo

Answer 2

您可以使用其他答案和评论中提到的list-style标记上的p来完成此操作。 但是你还有两个选择：

1. 使用JavaScript将带有li元素的p标签包装起来，或者通过加载JavaScript（jQuery）优雅地将p标记替换为ul和li。
2. 使用background-image设置光盘映像并将padding-left提供给p标记。

由于p标记不是列表，因此使用list-style-type和display: list-item的解决方案在语义上是不正确的。我的解决方案2在语义上也不正确，因为您仍然使用p作为列表。如果你有可能使用解决方案1，它会更好，或者只是修改PHP循环。