Form going to next line in HTML

July 28, 2023

I’m making an interface inside a header, and the with a text input and a submit button automatically goes farther down the page, while my other anchor tags that I use as buttons stay on the same line.

I have tried using Display: flex and Align-items: center and justify-content: center. They didn’t work, because the form stayed 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>

>Solution :

Set the display of the form to inline. If you’re concerned about it wrapping on small screens, set the whitespace property of the nav to nowrap.

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;
}

form {
  display: inline;
}

nav {
  white-space: nowrap;
}

<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>