顺风文本对齐底部

Question

我有以下代码创建两个

标签来存储一些文本：

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

我正在尝试让最后一个

标签与第一个标签对齐底部。我已经尝试将

标签当前放在

的内部和外部

标签，但我似乎无法得到正确的结果，目前看起来像这个：

我希望“tsa”文本显示在此处：

关于我目前获得它的方式，我需要改变什么？

注意：我用黄色突出显示了

只是为了表明文本没有与它的底部对齐。

Answer 1

您可以通过为所有 <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>

Answer 2

您可以按照下面的代码来解决

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

顺风文本对齐底部

Tailwind text align bottom

html

css

vue.js

tailwind-css