I've encountered an issue while creating a search bar with a submit button. When I link the input box to a class in my CSS document, it causes misalignment between the box and the button.
Here's a visual representation of the problem: Current Alignment
If I remove the class from the input element, the alignment is restored but it removes some formatting from the design.
What I actually need is the correct alignment, along with all the formatting in place:
This is the HTML code I am using:
<div class="search">
<input type="text" placeholder="Search.." name="search" class="search">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
Below is the corresponding CSS:
.search {
padding: 7.5px;
font-size: 15px;
border-radius: 4px;
border: none;
margin-top: 7px;
margin-right: 200px;
float: right;
}
The end goal is to have the search box aligned correctly with all formatting intact, as shown here:
Any suggestions on how to resolve this issue would be greatly appreciated.
I hope I have provided enough clarity on the matter, but please do let me know if you require further details.
Thank you!