Question

有人可以告诉我stackoverflow如何获得菜单下的连续行：

我基本上得到了一个主要的div，它是一个弹性盒子（没有边框设置）。它包含设置底部边框的元素。但是，如果我想像stackoverflow那样将项目分开，那么我会在底线上找到空白。

是否有人知道在将项目间隔出来时如何实现连续底线？

＆＃13;

<!DOCTYPE HTML>
<html>
  <style>
    #mainContainer {
      padding:30px;
      padding-top:100px;
    }
    #containerDispBar {
      height:40px;
      display: flex;
      flex-direction: row;
    }
    .dispBarItem {
      display: flex;
      flex-basis: 20%;
      padding:3px;
      justify-content: center;
      border-width:1px;
      border-style:solid;
      margin-left:8px;
    }

    .dispBarItem > span {
      align-self: center;
    }

    .dispBarItem:last-child{
      flex-basis: 60%;
      border:none;
      border-bottom: 1px solid;
    }

    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      border-width:1px;
      border-style:solid;
      border-top:none;
      height:300px;

    }
  </style>

  <body>
    <div id="mainContainer">
      <div id="containerDispBar"> 
        <div class="dispBarItem"><span>A</span> </div>
        <div class="dispBarItem"><span>B</span> </div> 
        <div class="dispBarItem"></div> 
      </div>
      <div class="container"> 
      </div>
    </div>
  </body>
</html>

＆＃13;

Answer 1

你的意思是这样吗？

诀窍是将border-bottom设置为白色，并设置margin-bottom: -1px以使.container边框上的边框重叠。

＆＃13;

#mainContainer {
  padding:30px;
  padding-top:100px;
}
#containerDispBar {
  height:40px;
  display: flex;
  flex-direction: row;
}

.dispBarItem {
  display: flex;
  flex-basis: 20%;
  padding:3px;
  justify-content: center;
  margin-left:8px;
}

.selected {
  border: 1px solid;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;  
}

.dispBarItem > span {
  align-self: center;
}

/*.dispBarItem:last-child{
  flex-basis: 60%;
  border:none;
  border-bottom: 1px solid;
}*/

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-width:1px;
  border-style:solid;
  /*border-top:none;*/
  height:300px;
}

＆＃13;

<!DOCTYPE HTML>
<html>
  <style>
    
  </style>

  <body>
    <div id="mainContainer">
      <div id="containerDispBar"> 
        <div class="dispBarItem selected"><span>A</span> </div>
        <div class="dispBarItem"><span>B</span> </div> 
        <!--<div class="dispBarItem"></div>-->
      </div>
      <div class="container"> 
      </div>
    </div>
  </body>
</html>

＆＃13;

stackoverflow如何进行菜单

1 个答案: