如何设置利润顶部/底部到一个李? [英] How can I set margin top/bottom to a li?
问题描述
这是我的代码:
li {padding:5px 4px 6px 7px; margin-top:3px; margin-bottom:3px; list-style:none;} li + li {border-top:1px solid#eff0f1;} li:hover {background-color:#f7f8f8;}
=snippet-code-html lang-html prettyprint-override> < ul> < li>某事< / li> < li>其他< / li> < li>还有别的东西< / li>< / ul>
如您所见,这些行的顶部没有任何空白。换句话说, margin-top:3px;
不工作。为什么?
当前输出: b
预期输出: b
$ b
注意:我可以将< li>
中的所有内容封装到< div>
。然后将所有 li
的属性设置为< div>
。
您的问题是由于折叠边距而导致的 https://developer.mozilla.org/en-US/docs / Web / CSS / CSS_Box_Model / Mastering_margin_collapsing :
块的顶部和底部边距有时会合并
为了解决这个问题,我将在一个span或div中包含li的内容,并将原始 li
填充,然后将3px边距作为填充放在 li
li {list-style:none; padding:3px 0; / *这代替你的保证金* /} li + li {border-top:1px solid#eff0f1;} li> span {display:block; padding:5px 4px 6px 7px; / *这是你原来的填充* /} li:hover> span {background-color:#f7f8f8;}
ul> < li>< span>某事< / span>< / li> < li>< span>其他< / span>< / li> < li>< span>别的东西< / span>< / li>< / ul>
UPDATE
如果您无法更改HTML,那么您将需要这样: / p>
li {list-style:none; padding:5px 4px 6px 7px; margin-bottom:7px; / * 3px margin + 1px for the border * / position:relative;} li + li:before {/ *这是一个伪元素来创建边框* / content:'';显示:block; height:1px; background:#eff0f1; position:absolute; top:-4px; left:0; right:0;} li:hover {background-color:#f7f8f8;}
< ul> < li>某事< / li> < li>其他< / li> < li>还有别的东西< / li>< / ul>
Here is my code:
li {
padding: 5px 4px 6px 7px;
margin-top: 3px;
margin-bottom: 3px;
list-style: none;
}
li + li {
border-top: 1px solid #eff0f1;
}
li:hover {
background-color: #f7f8f8;
}
<ul>
<li>something</li>
<li>something else</li>
<li>something else again</li>
</ul>
As you see, there isn't any white space in the top of those rows. In other word, margin-top: 3px;
doesn't work. Why? And how can I fix it?
Current output:
Expected output:
Note: I can wrap everything which is into <li>
to a <div>
. And then set all those li
's properties to that <div>
. But I want to know how can I do that with my current HTML structure?
Your problem is due to collapsing margins - from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing:
Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.
To get around this, I would wrap the content of the li in a span or div and put your original li
padding on that, and then put the 3px margin as padding on your li
instead:
li {
list-style: none;
padding: 3px 0; /* this is in place of your margin */
}
li + li {
border-top: 1px solid #eff0f1;
}
li > span {
display: block;
padding: 5px 4px 6px 7px; /* this is you original li padding */
}
li:hover > span {
background-color: #f7f8f8;
}
<ul>
<li><span>something</span></li>
<li><span>something else</span></li>
<li><span>something else again</span></li>
</ul>
UPDATE
If you cannot change your html then you will need something like this:
li {
list-style: none;
padding: 5px 4px 6px 7px;
margin-bottom:7px; /* 3px margin plus 1px for the border */
position:relative;
}
li + li:before { /* this is a pseudo element to create the border */
content:'';
display:block;
height:1px;
background: #eff0f1;
position:absolute;
top:-4px;
left:0;
right:0;
}
li:hover {
background-color: #f7f8f8;
}
<ul>
<li>something</li>
<li>something else</li>
<li>something else again</li>
</ul>
这篇关于如何设置利润顶部/底部到一个李?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!