vue.js 使用顺风时,分段按钮上的边框出现问题

ppcbkaq5  于 2022-11-30  发布在  Vue.js
关注(0)|答案(1)|浏览(154)

尝试创建分段按钮,但边框有问题。我想在所有地方都有1px的边框,包括按钮之间
第二个变体的结构(按钮动态呈现)

<div class="divide-x">
 <button class="border-y first:border-l last:border-r">
</div>

我尝试过多种边界方式

  • 每个按钮上的第一个边框,但按钮之间有2px,使用tailwind,我只能指定第一个/最后一个按钮来删除按钮之间的边框(我不想安装其他库)
  • 第二个divide-x在父级上+border-y+在子级上(按钮)第一个:border-r和最后一个:border-r由于某种原因最后一个:border-r不适用,创建了类似以下内容的内容

有什么建议吗?

xxls0lw8

xxls0lw81#

比如this

<div class="divide-x divide-black border border-black rounded-full">
    <button class="py-2 px-8">hello</button>
    <button class="py-2 px-8">hello</button>
    <button class="py-2 px-8">hello</button>
    <button class="py-2 px-8">hello</button>
</div>

还是像this一样

<div class="flex">
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
</div>

相关问题