MarMan29 MarMan29 - 1 month ago 5
CSS Question

How stackoverflow does their menus

Can someone please tell me how stackoverflow gets the the continuous line under their menu:

enter image description here

I've basically got a main div that's a flex box (no borders set). It contains elements that set the bottom border. However if i want to space the items out like stackoverflow then i get gaps on the bottom line.

Does anyone know how the continuous bottom line is achieved while spacing the items out?



<!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>




Answer

Do you mean something like this?

The trick is to set border-bottom white, and set margin-bottom: -1px so the border with overlap on the .container's border.

#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;
}
<!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>

Comments