Почему размер шрифта увеличивает ширину ввода

54
4

Мне интересно, почему установка атрибута CSS font-size на input в HTML автоматически увеличивает его ширину?

Я понимаю, почему он увеличивает высоту, но я бы хотел, чтобы input оставались одной и той же базой при изменении font-size.

Причина, по которой я спрашиваю, заключается в том, что она разбивает гибкую схему, которую я создаю, в которой есть input. Когда я увеличиваю размер шрифта, input полностью вырывается из макета.

Здесь воспроизводится (реагирует):

<div
style={{
backgroundColor: 'blue',
display: 'flex',
flexDirection: 'column',
maxWidth: 400,
padding: 20,
alignItems: 'center',
}}
>
<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 20 }} />{' '}
</div>

<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 50 }} />
</div>
</div>

Есть ли чистый способ решить эту проблему?

спросил(а) 2018-03-14T20:21:00+03:00 1 год, 8 месяцев назад
2
Решение
76

Вы можете использовать ширину 100% или фиксированную ширину на входах. Также, чтобы заставить это работать в IE, вам нужно удалить alignItems: 'center' из внешнего div

<div
style={{
display: 'flex',
flexDirection: 'column',
maxWidth: 400,
padding: 20,
}}
>
<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 20, width: "100%", boxSizing: "border-box" }} />
</div>

<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 50, width: "100%", boxSizing: "border-box" }} />
</div>
</div>

Для firefox вы должны обернуть ввод в контейнер и применить flex: 1 1 auto; к контейнеру.

надеюсь, это поможет

ответил(а) 2018-03-14T20:55:00+03:00 1 год, 8 месяцев назад
Еще 1 ответ
45

Тег <input> является одним из замещаемых элементов, и они часто имеют внутренние измерения.

В flexbox вы можете переопределить внутренний размер, добавив:

input {
min-width: 0;
}

Или дайте ему меньший size чем значение по умолчанию 20:

<input size="1">

Затем задайте размер желания, используя flex/flex-grow/flex-basis или width мере необходимости.

ответил(а) 2018-03-14T21:12:00+03:00 1 год, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема