Estou criando um FORM
dentro de um DIV
. Nele tenho uma caixa de texto para o usuário entrar com os dados e uma imagem, à direita, para encaminhar os dados.
O problema que venho tendo é que a minha imagem muda o posicionamento da AddressBar
dentro do container ou simplesmente não fica alinhada com os demais elementos.
.fields label {
background: #f6a828;
border-radius: 6px 0 0 6px;
color: #fff;
cursor: pointer;
display: inline;
float: left;
padding: 7px 5px;
font: 15px'Open Sans', Arial;
width: 60px;
}
#Address {
margin-left: 1px;
margin-top: 5px;
}
#searchButton {
width: 20px;
height:20px;
}
<form name="addressBar" method="post" action="teste2.html">
<fieldset>
<div class="fields">
<label for="">Address</label>
<input type="text" name="addressBar" id="Address">
<input type="image" name="searchButton" id="searchButton" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ44wMLpgbaOufW65LhrFS0gQ0O0k3CxVzCLzD6U1hLMAqDUif3YA">
</div>
</fieldset>
</form>
<form name="addressBar" method="post" action="teste2.html">
<fieldset>
<div class="fields">
<label for="">Address</label>
<input type="text" name="addressBar" id="Address">
<input type="image" name="searchButton" id="searchButton"
src="img/searchButton.jpg">
</div>
</fieldset>
</form>
Sem a imagem fica assim:
vertical-align: middle;
no #searchButton.