1
I’m creating a FORM
within a DIV
. In it I have a text box for the user to enter the data and an image, to the right, to forward the data.
The problem I’ve been having is that my image changes the positioning of AddressBar
inside the container or simply not aligned with the other elements.
.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>
Without the image it looks like this:
Puts
vertical-align: middle;
in #searchButton.– user22494
@Natan It worked. Thank you!
– absentia
@Natan when you want to answer a question use the answer area and not the question itself.
– Jorge B.
@Jorgeb. Thank you, as it was a simple answer I saw no need but I just added a more complete answer, since the current one did not explain the property itself.
– user22494