无法弄清楚如何制作像导航栏一样的搜索栏。搜索元素也不适用于 CSS

Question

如果这会影响任何内容，我会将导航栏放在标题上方。

目前的样子：

不知道如何制作像导航栏一样的搜索栏。此外，搜索元素不适用于 CSS。如果有人可以提供帮助，那就太棒了！我迷路了。我正在尝试使搜索栏和导航栏看起来像其他选项卡按钮和元素。与其他元素相同的高度。

 HTML
   <div class="navbar">
    <a class="active" href="#home">Home</a>
    <a herf="#about">About </a>
    <a herf="#patientinfo"> Patient Information </a>
    <div class="dropdown">
    <button class = "dropbutton">Select Hospital
    </button>
     <div class= "dropdown-content">
      <a href="#">Hospital</a>
       <a href="#">Hospital</a>
       <a href="#">Hospital</a>
         <a href="#">Hospital</a>
      </div>
      </div>
    <div class ="search">
            <form action="/action_page.php"> <!--backend -->
            <input type="text" name="search" placeholder="Search">
            <button type="submit">Submit</button>
           </form>
          <!--search bar -->
        </div>
       </div>

CSS 
       .navbar {
         overflow: hidden;
        background-color: black;
        font-family: 'Roboto';
        width: 100%;

          }
        .navbar a {
         float: left;
         font-size: 16px;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         }
        .navbar a.active{  /*shows active tab */
        background-color:red;
        color:white;
         }
        .navbar input[type=text] {
        background-color: inherit;
        color: white;
        width: 25%;
        float: left;
        padding: inherit;
        font-size: 16px;

          }

         }
        .navbar .search button { 
         float: left;
         padding: inherit;
         margin:0;
         margin-top:0px;
         background-color: inherit;
         font-size:15px;
         cursor:pointer;
      border:none;
    }
    .dropdown {
      float:left;
      overflow: hidden;
    }
    .dropdown .dropbutton {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }
    .navbar a:hover, .dropdown:hover .dropbutton {
        background-color: red;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

       .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

       .dropdown-content a:hover {
        background-color: red;
       }

       .dropdown:hover .dropdown-content {  /* WHEN U HOVER OVER IT SHOWS THE MENU 
             */
          display: block;
        }

Answer 1

This is how I would handle this. But note that you will have to do some responsive styles. I put in a fail safe so you dont have bad overlapping. Note that it looks alittle off on the code snippet because its so small, you should check it out by pasting it in a fresh html file.

.navbar {
         overflow: hidden;
         background-color: black;
         font-family: 'Roboto';
         width: 100%;
         position: relative;
        height: 47px;

           }
         .navbar a {
          float: left;
          font-size: 16px;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          }
         .navbar a.active{  /*shows active tab */
         background-color:red;
         color:white;
          }
         
     .dropdown {
       float:left;
       overflow: hidden;
     }
     .dropdown .dropbutton {
         font-size: 16px;
         border: none;
         outline: none;
         color: white;
         padding: 14px 16px;
         background-color: inherit;
         font-family: inherit;
         margin: 0;
     }
     .navbar a:hover, .dropdown:hover .dropbutton {
         background-color: red;
     }
     .dropdown-content {
         display: none;
         position: absolute;
         background-color: #f9f9f9;
         min-width: 160px;
         box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
         z-index: 1;
     }

        .dropdown-content a {
         float: none;
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
         text-align: left;
     }

        .dropdown-content a:hover {
         background-color: red;
        }

        .dropdown:hover .dropdown-content {  /* WHEN U HOVER OVER IT SHOWS THE MENU 
              */
           display: block;
         }

    .search {
      position: absolute;
      bottom: 0px;
      right: 0px;
    }
    .search-input {
      height: 47px;
      border: none;
      background-color: inherit;
      color: white;
      font-size: 16px;
    }
    .search-input:active {
      background-color: red;
    }
    .search-input:focus {
      background-color: red;
    }
    .search-button {
      padding: 16px 10px;
      height: 47px;
      border: none;
      color: white;
      background-color: black;
      font-size: 16px;
      cursor:pointer;
    }
    .nav-links {
      padding-right: 280px;
      height: 47px;
    }

<div class="navbar">
  <div class="nav-links">
      <a class="active" href="#home">Home</a>
      <a herf="#about">About </a>
      <a herf="#patientinfo"> Patient Information </a>
      <div class="dropdown">
        <button class = "dropbutton">Select Hospital
        </button>
         <div class= "dropdown-content">
          <a href="#">Hospital</a>
          <a href="#">Hospital</a>
          <a href="#">Hospital</a>
          <a href="#">Hospital</a>
        </div>
      </div>
    </div>
    <div class="search">
      <form action="/action_page.php"> <!--backend -->
      <input class="search-input" type="text" name="search" placeholder="Search">
      <button class="search-button" type="submit">Submit</button>
     </form>
    <!--search bar -->
  </div>
 </div>