将列表样式添加到p标签 [英] Adding list-styles to p tag

问题描述

我知道这看起来很愚蠢，但我试图给p标签添加列表样式。由于php的循环方式，我无法将它们放在li标签中。因此，我试图将它们设计为列表样式。

我试过类似的东西

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

但我似乎无法让它起作用。任何想法？

a jsFiddle

解决方案

这个不起作用的原因是因为默认 list-style-position 在应用 list-style-type 计数器的元素之外;这意味着它根据定义在元素的左边界之外。因此，如果你指定一个 margin-left （一个足够大的数字），它可以很好地工作：

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

list-style-position： 在内 也可以工作：

齿压：2em的;
list-style-type：disc;
display：list-item;
list-style-position：inside;
}

JS Fiddle演示。

I know this seems silly, but I'm trying to add list-styles to p tags. I cannot put them in li tags because of how the php is looping. So I am kind of stuck trying to style them to look like a list.

I have tried something like this

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

but I can't seem to get it to work. Any ideas?

a jsFiddle

解决方案

The reason this "didn't work" is because the default list-style-position is outside of the element(s) to which the list-style-type counter is applied; which means it's, by definition, outside of the left margin of the element. Therefore if you specify a margin-left (of a sufficiently-large number) it works perfectly:

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

JS Fiddle demo.

Alternatively, if you specify list-style-position: inside it also works:

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

JS Fiddle demo.

这篇关于将列表样式添加到p标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！