html - 将搜索框和搜索按钮与 HTML5 中的导航链接水平对齐

Question

如何在 HTML5 中将搜索框和按钮与导航链接水平对齐？我已将搜索框添加到导航栏，但它位于导航链接下方。

下面是问题的图片:

/* Below is the code for the navigation bar */

nav {           
    display: block;
} 

nav {
    margin: 0;
    clear: both;
    text-align: left;
    widht: 10px;
    padding: 25px;
    background-color: #68b12f;
    border-radius: 5px;
    background: linear-gradient(top, #68b12f, #50911e);
    border: 2px solid #509111;
    border-bottom: 2px solid #5b992b;
    overflow: hidden;
}

nav ul {
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline-block;
    list-style-type: none;
}

nav {
    margin: 0;
    clear: both;
    text-align: left;
    widht: 10px;
    padding: 25px;
    background-color: #68b12f;
    border-radius: 5px;
    background: linear-gradient(top, #68b12f, #50911e);
    border: 2px solid #509111;
    border-bottom: 2px solid #5b992b;
    overflow: hidden;
}

nav ul {
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline-block;
    list-style-type: none;
}

/* Below is the code for the search box and button */

#search-bar {
    border: 1px solid blue;
    padding: 5px;
    border-radius: 5px;
}

#search-button {
    border: 1px solid blue;
    padding: 5px;
    border-radius: 5px;
}

<!-- Below is the code for the navigation bar. -->

<div class="navigation" id="navigation">   
  <nav>
    <ul id="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="/data_centre/register.php">Booking</a></li> 
      <li><a href="/data_centre/display_user.php">Display User</a></li> 
      <form>
        <input name="q" id="search-bar" type="search" placeholder="Type to Search">
        <input id="search-button" type="submit" value="Find">
      </form>
    
    </ul>

  </nav>
</div>

我只想水平对齐导航链接和搜索框并查找按钮。

Answer 1

首先请删除

<form>
  <input name="q" id="search-bar" type="search" placeholder="Type to Search">
  <input id="search-button" type="submit" value="Find">
</form>

从 ul 标签并将其包装在另一个 div 中。

请引用此 fiddle 的简要说明:https://jsfiddle.net/nirmohi_shah/50aL2vhy/3/