Контекст:

Я относительно новым для HTML/CSS и была поставлена задача создания формы поиска для сайта моей компании. У меня весь код работает красиво, но то, что меня толкает, - это простая проблема стиля. В форме поиска поле ввода текста и поле ввода кнопки не выравниваются по вертикали очень красиво, и я не могу заставить их сотрудничать с помощью CSS. Я бы хотел, чтобы они оба были одинаковой высоты и уровня друг с другом. Любой совет? Спасибо!Форма ввода Выравнивание Issue (HTML/CSS)

Search Form

Код:

#srchContainer { 
 
    width: 70%; 
 
    height: 100%; 
 
    border: 0px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
#searchForm { 
 
    text-align: center; 
 
    margin: 20px auto; 
 
    padding: 0; 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 
#searchInputBox { 
 
    width: 60%; 
 
    height: 31px; 
 
    border: 1px solid #717171; 
 
    font-size: 1.5em; 
 
    margin: 0; 
 
    padding: 0 0 0 5px; 
 
    display: inline; 
 
} 
 
#srchBtn { 
 
    height: 32px; 
 
    margin-left: 2px; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    padding-left: 6px; 
 
    padding-right: 6px; 
 
    padding-bottom: 0px; 
 
    padding-top: 1px; 
 
    display: inline; 
 
} 
 
.btn { 
 
    color: #717171; 
 
    border-radius: 0px; 
 
    padding-left: 6px; 
 
    padding-right: 6px; 
 
    padding-bottom: 1px; 
 
    padding-top: 1px; 
 
    border: 1px solid #717171; 
 
    margin-left: 2px; 
 
    margin-right: 2px; 
 
    margin-top: 0px; 
 
    margin-bottom: 2px; 
 
    height: 20px; 
 
} 
 
.btn:hover, 
 
.btn2:hover { 
 
    background-color: #717171; 
 
    color: white; 
 
}

<html> 
 

 
<body> 
 
    <div id="searchContainer"> 
 
    <form id="searchForm"> 
 
     <input type="text" id="searchInputBox" /> 
 
     <input type="button" id="srchBtn" class="btn" value="Search" /> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-11-11 Uncle Bojangles

Стоит отметить, что основной причиной вашей проблемы является размер шрифта устанавливается на вводе текста. – technophobia

Применить vertical-align: middle; к обоим входных элементов.

источник

2015-11-11 16:30:13 lifetimes

Удивительно, как легко упустить что-то настолько простое. Я использовал это на родительских элементах, но не на самих входах. Большое спасибо! –

Вы можете легко работать в выравнивании с помощью CSS flexbox.

См. Следующую ссылку: browser support.

Here's быстрый пример:

.navbar { 
 
    display: flex; 
 
} 
 
.navbar input { 
 
    flex: 1; 
 
} 
 
.navbar button { 
 
    border: 1px solid #aaa; 
 
    margin-left: 3px; 
 
}

<div class="navbar"> 
 

 
    <input type="text"> 
 

 
    <button type="button">search</button> 
 

 
</div>

источник

2015-11-11 16:31:44 Romulo

Форма ввода Выравнивание Issue (HTML/CSS)

Контекст:

Код:

ответ

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