时间戳

首页 > 解决方案 > 无法将我的下拉菜单与下拉按钮对齐（更多）

css - 无法将我的下拉菜单与下拉按钮对齐（更多）

问题描述

所以我已经尝试了一切，但我似乎仍然无法将下拉内容与 dropbtn 对齐。我只希望内容始终位于更多菜单下方。

HTML：

`
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<head>
    <link rel="stylesheet" href="css-exper.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id = "container">
    <div class="nav" id="mynav">
        <ul class="menu" id ="menu">
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
        <li id ="more">
        <div class="dropdown">
          <a class="dropbtn" >More
            <i class="fa fa-caret-down"></i></a></div></li>
    </ul>
      <ul class="dropdown-content" id="drop">
        <li id ="stay"><a href="#">Menu</a></li>
        <li id ="stay"><a href="#">Menu</a></li>
      </ul>
      </div>
  </div>

<script src ="test.js"></script>
    </body>

CSS：

#container{ 
      width:1000px; 
      padding:100px 0; 
      margin:0px auto; 

}

.menu{ 
  padding:0;
   }

.nav{
    overflow: hidden; 
    text-align:center;
    margin: 0 auto;
}

.nav a, .dropbtn {
    display: inline-block;
    color: black;
    font-family: sans-serif;
    text-decoration:none;
    font-size: 17px;
    padding: 40px;
}

.nav a:hover{
    color: #DBB569;
}

.nav li{
    display: inline-block;
}

li a.active {
    color: #DBB569;
}

.nav .icon {
    display: none;
}

.dropdown .dropbtn {   
    border: none;
    outline: none;
    background-color: white;
}

.dropdown-content {
    display: none;
    position: absolute;
    max-width:200px;
    -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    background-color:white;
    z-index: 1;
    margin-top: -1.5em;
    padding: 0;
    list-style: none;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;

}

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 959px){

  #container,p{
    width: 100%;
  }

  .nav a, .dropbtn{
    padding: 30px;
  }
}

@media screen and (max-width: 640px){

  .nav a, .dropbtn {
    padding:20px;
  }
}

@media screen and (max-width: 320px){

#container{
  width: 320px;
}

}

JS（负责在More中一路隐藏物品）：

var all_widths = [110.64,144.64,199.14,135.19,162.59,115.63];

$(document).ready(function(){

 var item_count = ($( "#menu li" ).length);
 var menu_width = ($("#menu").width());
 var items_width = 0;

  for(var i = 0; i<item_count;i++){
    items_width += all_widths[i];
  }



while(menu_width < items_width + 20){
  items_width-= $('#menu li').not('#more').last().width();
  $('#menu li').not('#more').last().appendTo($('.dropdown-content'));
  $('#more').appendTo($('#menu'));
  $('#more').show();
}




$(window).resize(function(){ 

var item_count = ($( "#menu li" ).length);
var menu_width = ($("#menu").width());
var items_width = 0;
var bool = new Boolean(false);


for(var i = 0; i < item_count; i++){
  items_width += all_widths[i];
}

while(menu_width < items_width + 20){
  items_width -= $('#menu li').not('#more').last().width();
  $('#menu li').not('#more').last().appendTo($('.dropdown-content'));
  $('#more').appendTo($('#menu'));
  $('#more').show();
  bool = true;

}

while ((menu_width >= items_width + all_widths[item_count-1]) && bool == false){
  items_width += all_widths[item_count-1];
  $('.dropdown-content li').not('#stay').last().appendTo($('#menu'));
  $('#more').appendTo($('#menu'))
}


});

  $('#more').click(function(){
   $('.dropdown-content').slideToggle(); 
  });
  });


    `

你能帮我弄清楚我怎样才能让它工作吗？我已经尝试了所有我能记住的东西，我只需要了解如何真正让它工作静态但也能响应。非常感谢！

标签： cssalignmentnavbardropdownpositioning

解决方案

单击时，获取 dropbtn 的位置（我使用左侧位置）并将其添加到下拉列表的 css 中（我添加了一个 -50px 以考虑按钮和下拉列表宽度之间的差异，以便将其居中放置在下方）

（我只修改了#more上的点击功能，其余代码相同）

var all_widths = [110.64, 144.64, 199.14, 135.19, 162.59, 115.63];

$(document).ready(function() {

  var item_count = ($("#menu li").length);
  var menu_width = ($("#menu").width());
  var items_width = 0;

  for (var i = 0; i < item_count; i++) {
    items_width += all_widths[i];
  }



  while (menu_width < items_width + 20) {
    items_width -= $('#menu li').not('#more').last().width();
    $('#menu li').not('#more').last().appendTo($('.dropdown-content'));
    $('#more').appendTo($('#menu'));
    $('#more').show();
  }




  $(window).resize(function() {

    var item_count = ($("#menu li").length);
    var menu_width = ($("#menu").width());
    var items_width = 0;
    var bool = new Boolean(false);


    for (var i = 0; i < item_count; i++) {
      items_width += all_widths[i];
    }

    while (menu_width < items_width + 20) {
      items_width -= $('#menu li').not('#more').last().width();
      $('#menu li').not('#more').last().appendTo($('.dropdown-content'));
      $('#more').appendTo($('#menu'));
      $('#more').show();
      bool = true;

    }

    while ((menu_width >= items_width + all_widths[item_count - 1]) && bool == false) {
      items_width += all_widths[item_count - 1];
      $('.dropdown-content li').not('#stay').last().appendTo($('#menu'));
      $('#more').appendTo($('#menu'))
    }


  });

  $('#more').click(function() {
  	var btnPos = this.getBoundingClientRect();
  
    $('.dropdown-content').css({'left': btnPos.left - 50}).slideToggle();
  });
});
#container {
  width: 1000px;
  padding: 100px 0;
  margin: 0px auto;
}

.menu {
  padding: 0;
}

.nav {
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}

.nav a,
.dropbtn {
  display: inline-block;
  color: black;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 17px;
  padding: 40px;
}

.nav a:hover {
  color: #DBB569;
}

.nav li {
  display: inline-block;
}

li a.active {
  color: #DBB569;
}

.nav .icon {
  display: none;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  background-color: white;
}

.dropdown-content {
  display: none;
  position: absolute;
  max-width: 200px;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: white;
  z-index: 1;
  margin-top: -1.5em;
  padding: 0;
  list-style: none;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 959px) {
  #container,
  p {
    width: 100%;
  }
  .nav a,
  .dropbtn {
    padding: 30px;
  }
}

@media screen and (max-width: 640px) {
  .nav a,
  .dropbtn {
    padding: 20px;
  }
}

@media screen and (max-width: 320px) {
  #container {
    width: 320px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="nav" id="mynav">
    <ul class="menu" id="menu">
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li id="more">
        <div class="dropdown">
          <a class="dropbtn">More
            <i class="fa fa-caret-down"></i></a></div>
      </li>
    </ul>
    <ul class="dropdown-content" id="drop">
      <li id="stay"><a href="#">Menu</a></li>
      <li id="stay"><a href="#">Menu</a></li>
    </ul>
  </div>
</div>

推荐阅读