tailwindcss flex 对齐项目和

编程问答 2022-05-21

问题描述

拜托，tailwindCSS 有问题。我正在尝试制作投票按钮（like 和 disklike）。我在 footer 的 section 中的按钮和标签使用 flex。

请问，您能帮我如何将要投票的文本向右对齐吗？

我如何在 footer 中对齐标签中的文本？

这是我的代码（在此代码下方您可以找到游乐场的链接）

<main class="h-screen bg-gradient-to-b from-red-700 to-pink-200">
  <div class="p-5">
    <article class="max-w-xs mx-auto bg-white rounded-2xl shadow-md overflow-hidden">
      <figure>
        <img class="object-scale-down w-96" src="https://images.pexels.com/photos/5276584/pexels-photo-5276584.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=200" alt="Man looking at item at a store" />
      </figure>
      <article>
        <section class="flex text-2xl font-bold text-white p-2">
          <div class="flex-1 text-left bg-green-100 text-black rounded-xl mx-1 px-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
            </svg>
            20
          </div>
          <div class="flex-1 bg-red-500 rounded-xl mx-3 px-1 align-middle justify-end">
            48
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" viewBox="0 0 20 20" fill="currentColor">
              <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" />
            </svg>
          </div>
        </section>
        <section class="m-2">
          <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline uppercase text-center">discover beauty of horses</a>
          <p class="text-gray-500">Riding on horses is not easy as you can see that. Try this long way in horseback ride and you can see nature from most beauty height. You see every detail on the ground or look to the mounts far away from you.</p>
          <footer class="flex h-8">
            <span class="flex-shrink text-center text-xs text-white font-semibold bg-green-500 px-3 rounded-2xl mx-2">Short way</span>
            <span class="flex-grop text-center text-xs text-black font-semibold bg-yellow-500 px-3 rounded-2xl mx-2">Medium</span>
            <span class="flex-shrink text-center text-xs text-black font-semibold bg-red-500 px-3 rounded-2xl mx-2">Long way</span>
          </footer>
        </section>
      </article>
    </article>
  </div>
</main>

您在此处看到的完整代码：https://play.tailwindcss.com/I5DrixGeka

感谢您的建议

PS：我刚开始使用 tailwindCSS。再次感谢

解决方法

要将downvote 内容向右对齐，只需添加类True False Run-time exception (line 17): Required property 'MyProp' not found in JSON. Path '',line 1,position 2. 。

对于页脚，只需要使用 text-right。并添加适当的间距flex items-center。在按钮上添加一些填充space-x-#

检查working example。

px-3 py-1
,

我认为您应该重新考虑您在这种情况下的使用方式。

您将 flex 添加到保存按钮信息的两个 divs 的包装元素。实际上，您应该将 flex 添加到两个 divs。像这样：

<section>
  <div class="flex items-center justify-around">
    <!-- thumbs up -->
  </div>
  <div class="flex items-center justify-around">
    <!-- thumbs down -->
  </div>
</section>

这会将 flex div 中的内容居中，并以均匀间距所有 around 将它们隔开。

接下来是考虑在 grid 包装器上使用 flex 或 section。在这样的时刻，我个人更喜欢网格，但 flex 也一样好！这一切都在行动中，还有我自己的额外风格。

https://play.tailwindcss.com/ecOu6LHF6s