div 右侧的 X

Question

因此，我正在构建各种菜单。它应该是每个项目名称应该在 div 的中间，但 XIcon 需要在右侧（用于关闭 item/div）。这是代码

<div class="hidden sm:block">
      <div class="border-b border-gray-200">
        <nav class="-mb-px flex justify-between" aria-label="Tabs"> 
          <a v-for="tab in tabs" :key="tab.name" :href="tab.href" :class="[tab.current ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-900 hover:border-gray-300 hover:bg-gray-200', 'w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm']" :aria-current="tab.current ? 'page' : undefined">
            {{ tab.name }}             <XIcon class="h-6 w-6 text-black" aria-hidden="true" />
          </a>
        </nav>
      </div>
    </div>

我只是不知道完成此任务的最佳方法是什么。

Answer 1

将 float-right 添加到 XIcon div 修复它

div 右侧的 X

X on right side of div

css

flexbox

tailwind-css