Как сделать так, чтобы 2 границы перекрывались?
Я использую попутный ветер, и мне нужно добиться этого:
Поэтому я сделал рамку на родительском элементе и на обеих кнопках (увеличение и уменьшение).
Проблема: когда есть 2 границы, мы это видим. И рендер не похож на мой шаблон:
Я добавил класс -m-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 = "-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>
Спасибо за помощь !
нет, потому что рендер не совсем тот же.
Ответы 2
Вы можете рассмотреть возможность использования произвольного значения, если хотите иметь 1px только с одной стороны div.
<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;
}
}
Окончательный вывод:
Вы можете видеть, что есть некоторые «отсутствующие» пиксели. Мне нужно 100% совпадение
Можете ли вы указать мне точно и четко объяснить, что вы имеете в виду под «отсутствующими пикселями»?
Вы указываете мне, что положение 0 не совсем в центре? это проблема
если вы говорите о горизонтальном выравнивании -0 и + , они правильно расположены там, где должны быть , по прямой линии.
@Johan Ввод выглядит не по центру из-за стрелок вверх / вниз в некоторых браузерах для <input type = "number">. Если вы используете <input type = "text">, он будет выглядеть по центру.
@qrsngky, спасибо, что указали мне на точную проблему. Я позаботился об этом. надеюсь, это поможет искателю ответа.
Вы можете добавить style=border-(left/right): 1px solid #ccc; к стилю кнопки.
style="border-right: 1px сплошной #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>
Отвечает ли это на ваш вопрос? Двойная рамка делает div больше