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

Я хочу выровнять элемент <span> и текстовый элемент <input>. Высота <input> и <span> должна быть одинаковой, верхняя и нижняя границы должны быть на одной линии, а текст внутри элементов <input> и <span> должен быть в одной строке.Как правильно выровнять диапазон и элементы ввода?

.cnt { 
 
    margin: 5px; 
 
} 
 
.one { 
 
    background-color: #ffffff; 
 
    border: solid 1px #ADADAD; 
 
    height: 17px; 
 
} 
 
.two { 
 
    background-color: #ffffff; 
 
    border: solid 1px #ADADAD; 
 
    height: 17px; 
 
} 
 
.in { 
 
    background-color: #ffffff; 
 
    border: solid 1px #ADADAD; 
 
    height: 17px; 
 
} 
 
input { 
 
    padding: 0; 
 
}

<div class="cnt"> 
 
    <label> 
 
    <span class="one">Test in Span</span> 
 
    <span class="two">Span in test</span> 
 
    </label> 
 
    <input class="in" value="mmmnnnxx" type="text" /> 
 
</div>

https://jsfiddle.net/ajo4boom/

Как делать то, что я хочу?

источник

2016-08-04 Raf

Используйте 'линии height' и' вертикальным align'. – SLaks

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

Возможный дубликат: [** Почему мой textarea выше, чем его сосед? **] (http://stackoverflow.com/q/32414736/3597276) –

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

Другим решением было бы сделать следующее:

.cnt { 
 
    margin: 5px; 
 
} 
 
.one { 
 
    background-color: #ffffff; 
 
    border: solid 1px #ADADAD; 
 
    height: 17px; 
 
} 
 
.two { 
 
    background-color: #ffffff; 
 
    border: solid 1px #ADADAD; 
 
    height: 17px; 
 
} 
 
.in { 
 
    background-color: #ffffff; 
 
    border: solid 1px #ADADAD; 
 
    height: 17px; 
 
} 
 
input { 
 
    position: relative; 
 
    top: -1px; 
 
    padding: 0; 
 
}

<div class="cnt"> 
 
    <label> 
 
    <span class="one">Test in Span</span> 
 
    <span class="two">Span in test</span> 
 
    </label> 
 
    <input class="in" value="mmmnnnxx" type="text" /> 
 
</div>

Просто компенсировать <input> путем добавления

input { 
    position: relative; 
    top: -1px; 
}

More info on relative positioning in CSS.

источник

2016-08-04 16:53:49 TrampolineTales

Просто добавьте vertical-align для ввода.

Проверил: https://jsfiddle.net/ajo4boom/1/

источник

2016-08-04 16:51:49 Rohit

Вы можете использовать свой браузер инструментарий или Mozilla: поджигатель расширение,, чтобы помочь себе найти происхождение проблемы. Вы увидите, что только вход был действительно высотой 17px. Пространства были, в действительности браузера, 19px height.

Таким образом, определение высоты пролета до 19px также будет очень грубо работать.

источник

2016-08-04 16:52:54 technico

Вот возможное решение с использованием display: inline-block;, line-height и vertical-align, но это как @Leeish прокомментировал:

Высоты являются жестко входы, потому что браузеры все любят делать свою собственной вещи

.cnt { 
 
    margin: 5px; 
 
} 
 
label { 
 
    display: inline-block; 
 
} 
 
input { 
 
    padding: 0; 
 
} 
 
.one, .two, .in { 
 
    background-color: #ffffff; 
 
    border: solid 1px #ADADAD; 
 
    height: 17px; 
 
    display: inline-block; 
 
    line-height: 17px; 
 
    vertical-align: top; 
 
}

<div class="cnt"> 
 
    <label> 
 
    <span class="one">Test in Span</span> 
 
    <span class="two">Span in test</span> 
 
    </label> 
 
    <input class="in" value="mmmnnnxx" type="text" /> 
 
</div>

источник

2016-08-04 16:55:39 andreas

Многие из внутренних свойств inp uts будут отличаться от таковых. Прежде всего, вы также можете нормализовать border, font-family, font-size, line-height и padding.

Чтобы воспользоваться преимуществом height, введите display: inline-block на обоих элементах. Кроме того, box-sizing: content-box гарантирует, что они имеют одинаковые box-sizing, то есть способ padding и borders повлияет на их height и width.

.one, .two, .in { 
 
    box-sizing: content-box; 
 
    background-color: #ffffff; 
 
    border: solid 1px #ADADAD; 
 
    height: 17px; 
 
    display: inline-block; 
 
    font-family: sans-serif; 
 
    font-size: 16px; 
 
    line-height: 18px; 
 
    padding: 2px; 
 
}

<div class="cnt"> 
 
    <label> 
 
    <span class="one">Test in Span</span> 
 
    <span class="two">Span in test</span> 
 
    </label> 
 
    <input class="in" value="mmmnnnxx" type="text" /> 
 
</div>

источник

2016-08-04 16:59:03

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

ответ

Смежные вопросы