如何将带边框的文本放在导航菜单文本下方？

Question

我在导航菜单旁边做了一个圆形边框文本。我对如何将文本放在文本下方有疑问。请参考下图。

我想将即将发布的文本放在 COMPANY 和 CONTACT 菜单下方（我不是指做子菜单）下面是我为此所做的代码。

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

是否可以将圆形边框文字放在下面？如果没有，我会尝试让它贴在菜单文本旁边并压缩它们。

Answer 1

这是我认为 flexbox 非常适合的东西。

代码可能看起来像这样 - 当然，您需要针对 vue.js 进行调整。

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

如您所见，我只是将两个元素中的每一个都用一个 div 包裹起来，并给它一个 flex-column 类。然后在 CSS 中添加即可。

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