我有以下代碼創建兩個 <p> 標記來存盤一些文本：
<p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p>
<p v-else class="text-red-500 text-lg font-bold">{{my_value}}%</p>
<div class="inline-block align-bottom bg-yellow-500 align-text-bottom">
<p class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</p>
</div>
我試圖讓最后一個 <p> 標簽與第一個標簽相比底部對齊。我已經嘗試將 <p> 標簽當前放在 <div> 的 <div> 標簽內部和外部，但我似乎無法得到正確的結果，它目前看起來像這樣：
我希望“tsa”文本出現在這里：
對于我目前的方式，我需要改變什么？
注意：我用黃色突出顯示了 <div> 以顯示文本未與底部對齊。
uj5u.com熱心網友回復：
您可以通過為所有<p>標簽添加 flex-container 來解決您的問題。
<div class="flex items-baseline">
<p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p>
<p v-else class="text-red-500 text-lg font-bold">29%</p>
<p class="text-gray-500 text-sm ml-1">tsa</p>
</div>
uj5u.com熱心網友回復：
您可以按照以下代碼獲取解決方案
<script src="https://cdn.tailwindcss.com"></script>
<div v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%
<span class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</span>
</div>
<div v-else class="text-red-500 text-lg font-bold">{{my_value}}%
<span class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481804.html