我有一个ul
裹着的.box
。我已经为设置了底部边框.box
。这些ul
项目还具有底部边框,我希望将li
边框放置在.box
边框上方,以使.box
边框不再可见。我试图通过设置来做到这一点,margin-bottom: -1px
但不起作用。
请参阅所附图片:
这是我正在尝试的:
HTML:
<div class="box">
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</div>
CSS:
.box{
border-bottom: 1px solid blue;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
background: green;
border: 1px solid red;
}
问题
您基本上想让li
它的.box
父项溢出,但.box
设置为overflow:hidden;
。
解
一个可能的解决方案是先设置li
with position:relative;
,然后使其溢出bottom:-1px;
。然后overflow:hidden;
从.box
容器中取出并找到另一种方法来解决该明显的错误。
例如:
.box {
display:table; /* overcome the clear bug */
width:100%;
border-bottom: 1px solid blue;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
position:relative;
bottom:-1px;
float: left;
background: green;
border: 1px solid red;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句