【问题标题】: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;
}

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

【问题讨论】:

    标签: javascript html css vue.js


    【解决方案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。这完成了工作,最后要做的就是完美地重新对齐它们,因为文本被向上推。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-07-07
    • 1970-01-01
    • 1970-01-01
    • 2014-05-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多