所以我正在尝试创建一个响应式导航栏,其内容位于左侧、中间和右侧。现在,我的搜索栏位于导航栏的中间,下拉菜单与其对齐。
现在,下拉内容就在页面的最左边。
我已经尝试过 left:0px,根据 stackoverflow 中的一些其他论坛,它不起作用
HTML
<a href="./" class="active navleft">Cutlery</a>
<a href="shops">Shops</a>
<a href="mallpage.html">Malls</a>
<div class = "searchdropdown">
<input id ="searchbar" type="text" placeholder="Search..." onclick="searchDropToggle()" onkeyup="filterSearch()">
<div id="searchDropdown" class="searchdropdown-content">
<a>testing</a>
<a>testing 2</a>
</div>
</div>
<!--<button><img src = "images/icons/search.png"></button>-->
<a v-if="!loggedIn" href="login" class="navright">Log in</a>
<a v-if="loggedIn" class="navright" v-on:click.prevent="logout" href="">Sign Out</a>
<a v-if="loggedIn" id = "profilebutton" :href = "`profile?id=${this.userid}`" class="navright">Profile</a>
<a href="javascript:void(0);" class="icon" onclick="responsivenavbar()">
<img style = "height:16px; width: 16px;" src = "images/icons/menu.png">
</a>
</nav>
CSS
overflow: hidden;
background-color: #01333f;
text-align: center;
}
.navbar .navleft{
float:left;
font-size: 22px;
padding: 9.5px 16px;
}
.navbar .navright{
float: right;
}
.navbar button{
background-color: teal ;
height:30px;
width: 30px;
padding:0px;
margin:0;
margin-top: 8px;
margin-left:0;
border:none;
text-align: center;
}
.navbar button:hover{
cursor: pointer;
}
.navbar button img{
height:24px;
width: 24px;
margin:0;
padding:0;
}
.navbar a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 12px 14px;
text-decoration: none;
font-size: 18px;
}
.navbar a:hover {
background-color: #008ca0;
color: white;
}
.navbar a.active {
background-color: #008ca0;
color: white;
}
.navbar .icon {
display: none;
}
.searchdropdown{
overflow:hidden;
display: inline;
/*float:left;*/
/*this float:left; dosnt work as it makes my input to the left of the nav bar which i do not want*/
}
.navbar input{
height: 20px;
width: 200px;
padding:3px 20px;
border-radius:8px;
margin:0px;
margin-top:7px;
}
.searchdropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.searchdropdown-content a {
float:none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.searchshow {display: block;}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child), searchdropdown, .navbar input {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .searchdropdown {float: none; width: 100%; display: block;}
.navbar.responsive .searchdropdown-content {position: relative;}
.navbar.responsive input{display:block; width:100%; margin:0px; padding: 10px 20px;}
}
最后是 Javascript
function responsivenavbar() {
var x = document.getElementById("navbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
function searchDropToggle(){
document.getElementById("searchDropdown").classList.toggle("searchshow");
}
最佳答案
你应该阅读 css 定位 Css Positioning .
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
所以你需要给你的绝对定位元素的父类添加一个位置.searchdropdown-content
。在这种情况下,它将是 .searchdropdown
。然后,您可以使用顶部、左侧、右侧和底部将您的 .searchdropdown-content
绝对定位在 .searchdropdown
div 中。尝试添加相对于 .searchdropdown
的位置,如下所示:
.searchdropdown{
overflow:hidden;
display: inline;
position:relative;
}
关于javascript - 将下拉菜单与响应式导航栏中的输入对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57386279/