【问题标题】:Having problem with borders on segmented button using tailwind使用 tailwind 时分段按钮的边框有问题
【发布时间】:2022-11-25 15:40:10
【问题描述】:

尝试创建分段按钮,但边框有问题。 我想到处都有 1px 的边框,包括按钮之间

第二个变体的结构(按钮动态呈现)

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

我尝试了多种边界方式

  • 每个按钮上的第一个边框,但我在按钮之间有 2px,并且顺风我只能指定第一个/最后一个按钮来删除按钮之间的边框(我不想安装额外的库)
  • 第 2 个 divide-x on parent + border-y + on child(button) first:border-r and last:border-r 由于某种原因 last:border-r 不适用并创建这样的东西

有什么建议么?

【问题讨论】:

  • 你可以编辑你的帖子并添加 css 代码吗? :)
  • 在我的结构示例中添加顺风类

标签: javascript vue.js vuejs3 tailwind-css tailwind-ui


【解决方案1】:

根据您在项目中使用 Tailwind,您可以执行以下操作:

<div class="container">
  <button class="rounded-l-full border p-2">1</button>
  <button class="button border-y border-r p-2">2</button>
  <button class="button border-y p-2">3</button>
  <button class="rounded-r-full border p-2">4</button>
</div>

或者你可以看到这个tailwind playground?

【讨论】: