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

Posted 2023-03-06

【中文标题】如何将带边框的文本放在导航菜单文本下方？

【英文标题】：How do I put the bordered text underneath the nav-menu text?

【发布时间】：2022-01-18 07:07:12

【问题描述】：

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

我想将即将发布的文本放在 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;

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

【参考方案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;

【讨论】：

这是我第一次了解 flexbox。这完成了工作，最后要做的就是完美地重新对齐它们，因为文本被向上推。谢谢！