如果影响到任何内容，我会将导航条放在标题上方。
目前的情况：
不知道如何使搜索栏像导航栏一样。此外，search元素不适用于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;
}
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>