HTML / CSS - соответствие двух значений ширины метки / ввода на одной строке

Я пытаюсь, чтобы две метки с соответствующими входами находились в одной строке с одинаковой шириной, в настоящее время ширина портится, когда в относительно небольшом контейнере.

Пример ширины в маленьком контейнере:

HTML / CSS - соответствие двух значений ширины метки / ввода на одной строке

Код:

#row {
    display: flex;
    flex-wrap: nowrap;
    margin-top:4px;
}

#row label {
    display:block;
    width:25%;
    height:30px; 
    line-height:30px; 
    text-align:center;
}

#row input {
    width: 75%;
    border: 1px solid rgb(116, 115, 115);
    padding-left:3px;
}
<div id = "row">
  <label for = "start">Start</label>
  <input name = "start" id = "start" />
  <label for = "end">End</label>
  <input name = "end" id = "endTime"/>
</div>

Разница минимальная, но заметная. Какие-либо предложения?

Они одинаковой ширины ... можете проверить в инспекторе. Я подозреваю, что вы видите иллюзию, вызванную разной шириной текста.

Paulie_D 06.04.2021 21:33

Думаю, ты прав. Я просто осмотрел каждую и проверил их ширину! Спасибо.

DreadedSlug 06.04.2021 21:42
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
37
2

Ответы 2

Если вы хотите иметь поле ввода такой же ширины, попробуйте использовать свойство min-width, например:

#row input {
    min-width: 250px;
    border: 1px solid rgb(116, 115, 115);
    padding-left:3px;
}

Кстати, они оба выглядят одинаково.

Ширина такая же, глаза подшучивали.

Другие вопросы по теме