使用Tailwind将Div制作成按钮样式的视频链接列表问题

方案1：修复<button>标签实现（推荐，语义化更优） #

你之前用button标签时文本无法左右拆分，核心原因是button默认不是Flex容器，items-center和justify-between属性无法生效。只需给button添加flex类，就能实现标题与时长的左右分布，同时保留按钮原生交互特性。

优化后的核心代码：

<div class="w-full p-1" v-for="video in section.videos" :key="video.id">
  <a :href="video.url" class="block">
    <button class="w-full flex items-center justify-between bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
      <span>{{ video.title }}</span>
      <span>{{ video.length }}</span>
    </button>
  </a>
</div>

注意：每个视频单独用<a>包裹并绑定对应链接，替代原结构中整个section共用一个链接的逻辑，符合视频列表的交互预期。

方案2：用<div>模拟按钮样式 #

如果坚持用div实现，需给承载按钮样式的div添加背景色、内边距、圆角、hover效果，同时设置cursor-pointer模拟点击感：

核心代码示例：

<div class="w-full p-1" v-for="video in section.videos" :key="video.id">
  <a :href="video.url" class="block">
    <div class="w-full flex items-center justify-between bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors cursor-pointer">
      <span>{{ video.title }}</span>
      <span>{{ video.length }}</span>
    </div>
  </a>
</div>

完整调整后的代码片段 #

结合你的原有结构，修正后的完整代码如下：

<div class="mb-4">
  <h3 class="text-md uppercase font-extrabold text-gray-200 mb-6 mt-6">
    📚 Project Setup and Structure
  </h3>
  <div class="w-full">
    <div class="w-full p-6 bg-gray-800 rounded-xl mb-4 hover:bg-gray-700 transition-colors" v-for="c in courseContents">
      <div class="w-full p-4" v-for="section in c.contents" :key="section.id">
        <h2 class="font-bold text-3xl text-gray-200 pb-4">{{ section.sectionTitle }}</h2>
        <div class="w-full">
          <div class="w-full p-1" v-for="video in section.videos" :key="video.id">
            <a :href="video.url" class="block">
              <button class="w-full flex items-center justify-between bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
                <span>{{ video.title }}</span>
                <span>{{ video.length }}</span>
              </button>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键优化点 #

• 给按钮容器添加flex类，实现内部元素左右分布
• 为循环元素添加:key属性，符合Vue的列表渲染规范
• 添加transition-colors类，让hover颜色变化更平滑
• 修正链接绑定逻辑，每个视频对应独立跳转链接

内容的提问来源于stack exchange，提问作者Mike3355