overflow: hidden; 后子元素margin负值失效

super18832324321 2017-11-23 09:38:55

.tb {

    border-bottom: 1px solid#EDECEE;

    height: 40px;

    line-height: 40px;

    margin: 0 0 16px;

    padding: 0;

}.tb a {

    display: block;

    padding: 0 10px;

    border: 1px solid#D9D9D9;

    background: #FFFFFF;

}.tb li.a a {

    background: #FFF;

    border: 1px#EDECEE solid;

    border-bottom: none;

    border-radius: 3px 3px 0 0;

    color: #333;

    font - weight: normal;

    margin-bottom: -1px;

    display: block;

}

<ul class="tb">

  <li class="a"> <a href="home.php?mod=spacecp&ac=profile&op=base">基本资料</a></li>

  <li> <a href="home.php?mod=spacecp&ac=profile&op=contact">联系方式</a></li>

  <li> <a href="home.php?mod=spacecp&ac=profile&op=edu">教育情况</a></li>

  <li><a href="home.php?mod=spacecp&ac=profile&op=work">工作情况</a></li>

  <li><a href="home.php?mod=spacecp&ac=profile&op=info">个人信息</a></li>

</ul>

这样一来，原本的样式应该是

但现在需要在.tb 也就是ul的层，给一个overflow: hidden; 防止多余li溢出，但是给了以后，在.tb li.a a 里给的 margin - bottom: -1px; 就无效了。最后的效果图也变成了这样，

请教在保持border-bottom: 1px solid#EDECEE; 在ul这层的情况下，怎么解决这个问题，

...全文

339 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

冉娃娃 2017-11-24

打赏
举报

既然设置了overflow:hidden;那超出范围的肯定是要被隐藏起来呀.不管你内部的a margin多少都会被隐藏起来.并不是失效.. 为什么要给ul加hidden呢.能不能不要hidden通过其他办法来处理

super18832324321 2017-11-24

打赏
举报

引用 7 楼 jslang 的回复:

ul 只设置 position: relative;
ul::after 这个伪元素设置 position: relative; z-index: -1;。

横线没有了。

天际的海浪 2017-11-24

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.tb {
    height: 40px;
    line-height: 39px;
    margin: 0 0 16px;
    padding: 0;
    overflow: hidden;
}

.tb::after {
	content: "";
	display: block;
	clear: both;
	width: 100%;
	height: 0px;
    border-bottom: 1px solid #EDECEE;
}

.tb li {
	float: left;
	list-style: none;
}
.tb a {
    display: block;
    padding: 0 10px;
    background: #FFFFFF;
}

.tb li.a a {
    background: #FFF;
    border: 1px #EDECEE solid;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    color: #333;
    font-weight: normal;
    margin-bottom: -1px;
    display: block;
}
</style>
</head>
<body>

<ul class="tb">
  <li class="a"> <a href="home.php?mod=spacecp&ac=profile&op=base">基本资料</a></li>
  <li> <a href="home.php?mod=spacecp&ac=profile&op=contact">联系方式</a></li>
  <li> <a href="home.php?mod=spacecp&ac=profile&op=edu">教育情况</a></li>
  <li><a href="home.php?mod=spacecp&ac=profile&op=work">工作情况</a></li>
  <li><a href="home.php?mod=spacecp&ac=profile&op=info">个人信息</a></li>
</ul>

</body>
</html>

天际的海浪 2017-11-24

打赏
举报

ul 只设置 position: relative; ul::after 这个伪元素设置 position: relative; z-index: -1;。

super18832324321 2017-11-24

打赏
举报

引用 5 楼 jslang 的回复:

[quote=引用 4 楼 super18832324321 的回复:] [quote=引用 2 楼 jslang 的回复:] margin-bottom: -1px;移到ul上，ul外面包个div，border-bottom: 1px solid #EDECEE;移到div上

不能修改HTML。因为很多页面都用这个样式 [/quote] 那么就，ul 设置::after 伪元素， border-bottom: 1px solid #EDECEE;放伪元素中，伪元素可能还需要设置 position: relative; z-index: -1;。 [/quote] ul.tb { border-bottom: 1px solid #EDECEE !important; position: relative; z-index: -1; 这样设置以后整个ul就隐藏了

天际的海浪 2017-11-24