While creating a header interface, I encountered an issue where the form with text input and submit button was automatically moving down the page, unlike my anchor tags which remained on the same line.
I attempted using CSS properties like display: flex, align-items: center, and justify-content: center, but they didn't resolve the problem as the form continued to stay below the buttons.
body {
background-color: red
}
input[type="text"],
textarea,
select {
border: none;
border-radius: 2px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
padding: 7px;
font-size: 19px;
width: 200px;
}
#bar:focus {
outline: none;
}
#button {
border: none;
background-color: #999;
border-radius: 2px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
color: #666;
font-size: 19px;
padding: 7px;
}
#button:hover {
background-color: #888;
}
a {
font-size: 19px;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;
background-color: #999;
border-radius: 3px;
text-decoration: none;
color: #666;
}
a:hover {
background-color: #888;
}<nav>
<a id="home" href="#">Home</a>
<a href="contribute.html" id="contribute">Contribute</a>
<a href="credits.html" id="credits">Credits</a>
<a href="searchpage.html" id="random">Random Article</a>
<a href="FAQ.html" id="faq">FAQ</a>
<form method="get" action="search.html">
<input type="text" id="bar" placeholder="Search..." required="" oninvalid="this.setCustomValidity('Do not leave search bar blank.')" oninput="setCustomValidity('')" autocomplete="off">
<input type="submit" value="Search" id="button">
</form>
</nav>