css 如何使两个边界重叠？

mdfafbf1 于 2023-04-01 发布在其他

关注(0)|答案(2)|浏览(176)

我使用顺风，我需要实现这一点：

所以我在父元素和两个按钮（递增和递减）上做了一个边框。
问题：当有2个边界时，我们可以看到它。并且渲染不像我的模板：

我添加了类-m-px，但还不够。
这是playground
下面是代码：

<div class="flex flex-col gap-2 p-8">
  <div class="flex w-fit items-center rounded border border-solid border-neutral-300">
    <button type="button" class="-m-px mr-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">
      -
    </button>

    <input id="{id}" type="number" value="0" class="h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="-m-px ml-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">
      +
    </button>
  </div>
</div>

谢谢你的帮助！

css

来源：https://stackoverflow.com/questions/75897443/how-to-make-2-borders-overlap

2条答案

按热度按时间

ztigrdn81#

如果你只想在div的一面有1 px，你可以考虑使用任意值

<div class="flex flex-col gap-2 p-8">
  <div class="flex w-fit items-center rounded border border-solid border-neutral-300">
    <button type="button" class="mr-0 h-10 w-10 rounded border-r-[1px] border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">-</button>

    <input id="{id}" type="number" value="0" class="h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="h-10 w-10 rounded border-l-[1px] border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">+</button>
  </div>
</div>

编辑：

由于左箭头和右箭头将允许用户递增/递减值，因此零被放置在稍微靠左的位置。

要删除这个，需要在css文件中添加以下代码

@layer components {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

最终输出：

Tailwind-css

赞(0）回复(0）举报 2023-04-01

6tdlim6h2#

您可以将style=border-(left/right): 1px solid #ccc;添加到按钮样式。
style=“border-right：1 px固体#ccc;

<div class="flex flex-col gap-2 p-8">
  <div class="flex w-fit items-center rounded border border-solid border-neutral-300">
    <button type="button" class="-m-px mr-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none style="border-right: 1px solid #ccc;">
      -
    </button>
    <input id="{id}" type="number" value="0" class="h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="-m-px ml-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none style="border-left: 1px solid #ccc;">
      +
    </button>
  </div>
</div>

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何使两个边界重叠？

2条答案

相关问题

热门标签

最新问答