Выравнивание по горизонтали - исправлено

Как сделать элементы input одинаковыми по горизонтали?

В процессе создания сервиса TelegramID, который позволяет в один клик узнать id группы или канала в Telegram столкнулся с проблемой: поле input (куда нужно вводить адрес канала или группы) выходил за границы таблицы и не разу не совпадал с горизонтальными размерами кнопки. Выглядело это следующим образом:
одинаковыми по горизонтали

Причем самым неприятным было то, что стили:

.input_name_field,
.get_id_button {
/* width: 100%; */
background-color: #ffffff;
border-radius: 5px;
border: 1px solid #ffffff;
font-size: small;
box-shadow: 1px 1px 10px rgb(173, 173, 173);

прекрасно работали в Edge, но совершенно не работали в Chrome.

Стал разбираться с этой проблемой, и оказалось, что я не первый человек с ней столкнувшийся. Решение нашлось — очень простое, кстати:
1. В родительском элементе (форма) делаем: display: flex
2. Добавляем туда же: flex-direction: column
3. В стилях поля input и кнопки убираем: width: 100%
4. Радуемся:
Выравнивание по горизонтали - исправлено

Как всегда — в случае возникновения вопросов пишите на почту или в Telegram.

Support the Blog!

Running a blog takes a lot of effort, time, and passion. Your donations help improve the content, inspire new ideas, and keep the project going.
If you’ve enjoyed the blog’s materials, any support would mean the world to me. Thank you for being here! ❤️

PayPal Logo Donate via PayPal

Revolut Logo Donate via Revolut