How do I put the bordered text underneath the nav-menu text?-CodePudding

I did a round bordered text right next to the nav-menu. I having issues on how will I put the text underneath the texts. Refer to the image below.

I wanted to put the coming soon texts underneath the COMPANY and CONTACT menu (I don't mean doing a sub-menu) Below are the code I did for doing this.

<el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
<div class = csoon1>
  <span class = text>COMING SOON</span>
</div>
<el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
<div class = csoon2>
  <span class = text>COMING SOON</span>
</div>

.text {
  border: 2px solid #00db99;
  border-radius: 10px;
  background-color: #00db99;
  font-size: 13px;
}

Is it possible to put the round bordered text underneath? If not I'll try make it stick next to the menu text and get them compressed.

CodePudding user response：

This is something that I think flexbox is really good for.

The code can look something like this - you'd need to adjust for vue.js of course.

<div >
   <el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
   <div class = csoon1>
      <span class = text>COMING SOON</span>
   </div>
</div>
<div >
   <el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
   <div class = csoon2>
      <span class = text>COMING SOON</span>
   </div>
</div>

So as you can see, I just wrapped each of the two elements with a div and gave it a class of flex-column. Then in CSS you just add.

.flex-column {
   display: flex;
   flex-direction: column;
}