javascript - 将下拉菜单与响应式导航栏中的输入对齐
问题描述
所以我试图创建一个响应式导航栏,内容位于左侧、中间和右侧。现在,我在导航栏中间的搜索栏,下拉菜单与它不对齐。
现在,下拉内容就在页面的最左侧。
根据stackoverflow中的其他一些论坛,我已经尝试过left:0px
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。
具有位置的元素:绝对;相对于最近的定位祖先定位(而不是相对于视口定位,如固定)。
然而; 如果绝对定位元素没有定位的祖先,它使用文档正文,并随着页面滚动移动。
因此,您需要在绝对定位元素的父类中添加一个位置.searchdropdown-content
。在这种情况下,将是.searchdropdown
。然后,您可以使用 top、left、right 和 bottom将您的绝对定位.searchdropdown-content
在div 中。.searchdropdown
尝试添加相对位置,.searchdropdown
如下所示:
.searchdropdown{
overflow:hidden;
display: inline;
position:relative;
}
推荐阅读
- javascript - 仅在谷歌浏览器中删除 Summernote 中的字符时出错
- react-native - 如何在 react-native-mapbox-gl 中实现可拖动标记?
- c++ - 绘制简单多边形时出现 Qt C++ 错误
- mariadb - 在 MariaDB 10.3 中允许对特定用户进行外部访问
- java - kafkaProducer第一次尝试发送记录时无法创建主题INVALID_REPLICATION_FACTOR
- java - 由于快照依赖关系(?),Gradle 同步失败(Android Studio)
- json - 以角度显示 json 数据(使用打字稿)
- xslt-1.0 - 基于 xsl 1.0 中的一个值对相似记录进行分组
- python - Tensorflow:tf.control_dependencies 没有按预期工作
- javascript - 如何基于一个属性对数组进行排序,然后在 React Redux 应用程序中按另一个属性分组