Question 218145 in Html Question posted in
Some basic documentation can be found here.

Form going to next line in HTML

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

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    The changes I have made:

    nav{
    display: flex;
    flex-wrap: wrap;
}

    The above code will do it. But I also made some other modification to make horizontal space.

    a {
    /* font-size: 19px; */
    font-size: 14px;
}

input[type="text"], textarea, select {
    /* width: 200px; */
    width: 100px;
}

    body {
background-color: red
}

nav{
    display: flex;
    flex-wrap: wrap;
}

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; */
width: 100px;
}

#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-size: 14px;
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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search