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

ppcbkaq5 于 2022-11-30 发布在 Vue.js

关注(0)|答案(1)|浏览(155)

尝试创建分段按钮，但边框有问题。我想在所有地方都有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不适用，创建了类似以下内容的内容

有什么建议吗？

vue.js

来源：https://stackoverflow.com/questions/74569336/having-problem-with-borders-on-segmented-button-using-tailwind

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2022-11-30

我来回答

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

1条答案

相关问题

热门标签

最新问答