问答详情
源自：10-1 编程挑战

点击之后的li下边框覆盖ul的下边框，为什么覆盖不了呢。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>话费充值</title>  

<style type="text/css">

     /* CSS样式制作 */  

     *{padding: 0px;margin: 0px;}

       ul{background:gray;list-style: none;overflow: hidden;border-bottom: 2px solid darkred;height: 40px;}

       #tab ul li{display:inline-block;border: 2px solid cornflowerblue;float:left;line-height:38px;margin: 0px 10px;border-bottom: none;}

       #tab{width: 300px;padding: 10px;}

       #tab div{border: 1px solid cornflowerblue;padding: 10px 5px;border-top: none;line-height: 30px;}

       #tab ul li.on{border-top:3px solid darkred;border-bottom: 2px solid blue;}

       .hide{display: none;}

    </style>

    <script type="text/javascript">

         

    // JS实现选项卡切换

  window.onload=function(){

  var otab=document.getElementById("tab");

  

  var oul=otab.getElementsByTagName("ul")[0];

  var oli=oul.getElementsByTagName("li");

  var odiv=otab.getElementsByTagName("div");

  for(var i=0;i<oli.length;i++){

  oli[i].index=i;

  oli[i].onclick=function(){

  for(var j=0;j<oli.length;j++){

  oli[j].className="";

  odiv[j].className="hide"

  }

  this.className="on";

  odiv[this.index].className=""

  }

 

  }

  }

  

  

    

    </script>

 

</head>

<body>

<!-- HTML页面布局 -->

<div id="tab">

<ul>

<li class="on">房产</li>

<li>家居</li>

<li>二手房</li>

</ul>

    <div>  275万购昌平邻铁三居 总价20万买一居<br>

    200万内购五环三居 140万安家东三环<br>

    北京首现零首付楼盘 53万购东5环50平<br>

    京楼盘直降5000 中信府 公园楼王现房<br></div>

    <div class="hide"> 40平出租屋大改造 美少女的混搭小窝<br>

     经典清新简欧爱家 90平老房焕发新生<br>

     新中式的酷色温情 66平撞色活泼家居<br>

     瓷砖就像选好老婆 卫生间烟道的设计<br></div>

     

     <div class="hide">通州豪华3居260万 二环稀缺2居250w甩<br>

     西3环通透2居290万 130万2居限量抢购<br>

     黄城根小学学区仅260万 121平70万抛!<br>

     独家别墅280万 苏州桥2居优惠价248万<br></div>

 

</div>




 

</body>

</html>


提问者：慕莱坞9426892 2019-10-09 18:49

个回答

  • Gixgine
    2019-10-12 22:22:30

    你li的border，padding，margin先别设置，然后设置li的高度等于ul的高度，再设置border，子元素的超过父容器的部分会覆盖父容器，自己算其他数据如果你不想上边框也覆盖，随便问一下#tab ul li.on不是直接.on就行了吗类多的话再ul .on = =

    1
  • qq_慕慕947699
    2019-10-11 11:22:53

      <style type="text/css">    
  /* CSS样式制作 */    
  * {      
  padding: 0px;      
  margin: 0px;    
  }    
  ul {      
  /* background: gray; 背景不要*/       
  list-style: none;      
  overflow: hidden;      
  /* border-bottom: 2px solid darkred; 下边框给div来写*/      
  height: 40px;    
  }    
  #tab ul li {      
  display: inline-block;      
  border: 2px solid cornflowerblue;      
  float: left;      
  line-height: 38px;      
  margin: 0px 10px;      
  border-bottom: none;    
  }    
  #tab {      
  width: 300px;      
  padding: 10px;    
  }    
  #tab div {            
  border: 1px solid cornflowerblue;            
  border-top: 2px solid darkred;/* 添加上边红色边框 */      
  padding: 10px 5px;      
  /* border-top: none; 去掉*/      
  line-height: 30px;      
  margin-top: -2px;    
  }    
  #tab ul li.on {      
  border-top: 2px solid darkred;      
  /* border-bottom: 2px solid blue; 去掉*/      
  position: relative;  /*定位*/    
  z-index: 1000;    /*调整层级*/
  }    
  /* 添加伪类白线盖住 */    
  #tab ul li.on::before {      
  content: '';      
  position: absolute;      
  height: 2px;      
  width: 100%;      
  background: #fff;      
  bottom: 0px;      
  left: 0;    
  }    
  .hide {      
  display: none;    
  }  
  </style>


    0