Как выровнять input
мой input с классом but_get съезжает вверх а должен быть inline как это сделать?
Вот мой html
<div id="button_get">
<input id="but_get_1" type="text" class="but_get"/>
<div><select id = "color_1" class="color" onchange = "color(this.id, this.value)">
<option value="gr">Цвет</option>
<option value="g">Зеленая</option>
<option value="r">Красная</option>
<option value="b">Синяя</option>
<option value="w">Белая</option>
</select></div>
<div><label for="url_chek" id="url_chek_l">URL-кнопка</label>
<input type="checkbox" value = "1" id="url_chek"/></div>
</div>
Вот мой css:
#button_get div{
display: inline;
}
.but_get{
display: inline;
margin-right: 15px;
width: 120px;
height: 31px;
}
#url_chek{
margin: 0 auto;
display: inline-block;
vertical-align: middle;
}
#url_chek_l{
vertical-align: middle;
}
#button_get{
margin-top: 25px;
height: 50px;
}
.color{
display: inline-block;
vertical-align: middle;
height: 31px;
width: 90px;
margin-right: 5px;
}
Ответы (2 шт):
Автор решения: Tuchyn2511
→ Ссылка
Если можно использовать флексы, то все просто. Родительскому блоку указываете display: flex;, затем выравниваете по центру их по центру align-items: center;. Проверил на jsfiddle, с использованием флексов все ровно.
#button_get{
margin-top: 25px;
height: 50px;
display: flex;
align-items: center;
}
Автор решения: Constantine Tretyakoff
→ Ссылка
Инлайновые элементы переносятся:
#button_get {white-space: nowrap;}