我在導航選單旁邊做了一個圓形邊框文本。我對如何將文本放在文本下方有疑問。請參考下圖。
我想將即將到來的文本放在 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;
}
是否可以將圓形邊框文本放在下面？如果沒有，我會嘗試將它貼在選單文本旁邊并壓縮它們。
uj5u.com熱心網友回復：
這是我認為 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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381091.html
標籤：javascript html css Vue.js