使用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中。

简要介绍这个小提琴：https://jsfiddle.net/nirmohi_shah/50aL2vhy/3/

Answer 2

对于这种情况，表单不应该进入ul内部，从那里删除它并将其取出以水平对齐：

HTML

recordsCount

CSS

<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>
    </ul>
    <div class="searchbar">
        <form>
            <input name="q" id="search-bar" type="search" placeholder="Type to Search">
            <input id="search-button" type="submit" value="Find">
        </form>
    </div>
    </nav>
</div>