开发者

CSS - Control Margin between <p> and <li>

I have a client that doesn't want any space between a paragraph and a list item. Is there a CSS way to control the margin between a <p> tag and a <li> tag?

Naturally I can add a class such paragraphs but in a 开发者_开发百科CMS world that is not practical. I need some kind of

p + li { margin-top: 1px };

or something like that.


You could use jQuery (or another JS framework) to tweak it on page load. Otherwise you'd have to wrap both elements in another element and select them in the CSS via that. That's about your only options though.


I think this space is caused by the <ul> tag and not the <li> tag. Does this work?

ul{
  margin-top:1px;
  margin-bottom:1px;
}


This ended up being somewhat problematic since this is a CMS environment. I am also working with a client that is not totally html savvy.

Turns out he was stripping the ul tags out of the lists which complicated the spacing issues.

My solution was to restore the ul tags and then do the following:

ul {margin-top: -10px;}

This effectively pulled the list up to the preceding paragraph and looks right.

Thanks for all the input.


How about li:first-child { margin-top:1px; }?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜