html – 段落后的CSS列表间距

概述如果我有用户生成的内容,例如： <p>my paragraph</p><ul> <li>item1</li> <li>item2</li></ul> 这输出段落末尾和列表之间的段落差距如下： 我的段落 > item1 > item2 我知道我可以通过在UL标签上设置margin-top和在p标签上设置margin-bottom来摆脱CSS中的差距,但有没有办法在不影响实际段落之间的边距 如果我有用户生成的内容,例如：

<p>my paragraph</p><ul>  <li>item1</li>  <li>item2</li></ul>

这输出段落末尾和列表之间的段落差距如下：

我的段落

> item1
> item2

我知道我可以通过在ul标签上设置margin-top和在p标签上设置margin-bottom来摆脱CSS中的差距,但有没有办法在不影响实际段落之间的边距的情况下完成.

内容是用户生成的,有一组有限的标签可用,没有字体,大小……可用所以所有格式都应该在CSS中完成,如果可能的话,而不必在标签中放置类.

编辑：
应该让我知道,因为我通常可以设置的边缘折叠工作方式

p { margin-bottom:0; }   li { margin-top:0; }

在两种情况下分离都是正确的,因为p标签上的margin-top属性仍然是1,但是我已经将margin-top设置为0.2em,以获得h2和p标签之间的较小间隙.

解决方法 这是兄弟选择器的完美用例.但是,它在ie6或ie7中不起作用.

p { margin: 0; }ul { margin-top: 0; margin-bottom: 0; }p + p { margin-top: 15px; }p + ul { margin-top: 3px; }ul + p { margin-top: 3px; }

所以,这里发生的是我在p和ul上将相关的边距设置为0,然后告诉任何兼容的浏览器在p之后查找p并为其添加上边距.对于p后的ul(虽然它是一个小的边距),和在ul之后的p(再次大的余量)相同.

同样,这在ie6和7中不起作用,因此您可能希望使用条件注释在这些浏览器上获得一个不错的(如果不是完美的)外观.

总结

以上是内存溢出为你收集整理的html – 段落后的CSS列表间距全部内容，希望文章能够帮你解决html – 段落后的CSS列表间距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。