Двойная рамка делает div больше
Я использую React и Tailwind, я хочу добиться этого:
Поэтому я добавил границу для кнопок + и -, а также добавил границу для родительского элемента div, чтобы отобразить границу для всего элемента.
Проблема в том, что границы кнопок кажутся больше из-за двух границ.
Если я использую рамку только справа для кнопки -, мы увидим, что она пропускает немного пикселей без рамки...
Как я могу достичь этого?
Вот мой код:
<div class = "p-8">
<div class = "flex w-fit items-center rounded ring-1 ring-neutral-300">
<button type = "button" class = "h-10 w-10 rounded border border-neutral-300 bg-transparent focus:outline-none">-</button>
<input id = "{id}" type = "number" value = "{count}" class = "arrow-hide 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 border-neutral-300 bg-transparent focus:outline-none">+</button>
</div>
</div>
Спасибо !
Ответы 2
Поскольку вам также нужна закругленная граница на внутреннем углу кнопок, ИМХО лучшее решение — сделать так, чтобы они перекрывали границу контейнера:
margin: -1px; position: relative; z-index: 1; height: calc(2.5rem + 2px);
Им нужны два дополнительных пикселя высоты, так что, вероятно, их придется жестко закодировать вот так, не вижу никакого способа напрямую объединить это с классом h-10 здесь. z-index необходим для того, чтобы поле ввода не было поверх правой границы левой кнопки.
И, конечно же, это будет работать только в том случае, если вам не нужна альфа-прозрачность на этих границах.
Если я использую рамку только справа для кнопки -, мы увидим, что она пропускает немного пикселей без рамки...
На самом деле он не пропускает ни одного пикселя, он кажется блеклым из-за закругленной границы.
Возможное решение:
- Удалите
roundedиз разделов+и- - Примените только левую и правую границу к соответствующим элементам div.
Обновленный код:
<div class = "p-8">
<div class = "flex w-fit items-center rounded ring-1 ring-neutral-300">
<button type = "button" class = "h-10 w-10 border-r border-neutral-300 bg-transparent focus:outline-none">-</button>
<input id = "{id}" type = "number" value = "{count}" class = "arrow-hide h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />
<button type = "button" class = "h-10 w-10 border-l border-neutral-300 bg-transparent focus:outline-none">+</button>
</div>
</div>
Выход:
Большое спасибо. Это не на 100% похоже на изображение, но я могу справиться с закругленными углами. Спасибо !