无法弄清楚如何使搜索栏像导航栏一样。 另外搜索元素不适用于CSS

Question

I put the navbar above the header if that affects anything.

How it currently looks like:

Can't figure out how to make search bar like the navbar. Also, the search element is not working with CSS. If anyone can help that would be amazing! I'm lost. I am trying to make the search bar and the navbar looks like the rest of the tab buttons and elements. Same height as the other elements.

 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>