表单转到 HTML 中的下一行

Question

我正在标题内创建一个界面，带有文本输入和提交按钮的界面会自动向下移动到页面的下方，而我用作按钮的其他锚标记则保持在同一行。

我尝试使用 Display: flex 和 Align-items: center 和 justify-content: center。它们不起作用，因为表单停留在按钮下方。

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>

Answer 1

将表单的显示设置为内联。如果您担心它在小屏幕上换行，请将导航的空白属性设置为 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>

Answer 2

我所做的改变：

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

上面的代码就可以了。但我还做了一些其他修改以留出水平空间。

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>