无论视口大小如何变化，都试图使下拉菜单与 header 的边缘齐平

Question

我有一些移动响应 header，但有一些下拉菜单我想保持与 header 元素的边缘齐平，无论视口大小如何变化，因为 header调整。

我尝试将这些下拉菜单放在它们自己的元素中，例如 div 或部分，并从 individual 选择器中添加所有相同的 css，但我没有在那里取得进展。

// The Dropdown for New-units
const newUnitDropdown = document.querySelector(".new_units");
newUnitDropdown.innerHTML = `
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
    <i class="fas fa-circle"></i>
    <span>New Units</span>
      <span class="icon is-small">
        <!--fontawesome required for the icon-->
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  </div>
</div>
`;

// The Dropdown for Overlay
const overlayDropdown = document.querySelector(".overlay");
overlayDropdown.innerHTML = `
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Select Overlay</span>
      <span class="icon is-small">
        <!--fontawesome required for the icon-->
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  </div>
</div>
`;

// The Dropdown for Cities
const cityDropdown = document.querySelector(".cities");
cityDropdown.innerHTML = `
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Choose a city</span>
      <span class="icon is-small">
        <!--fontawesome required for the icon-->
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href='#' data-value="oak" class='oak dropdown-item'>
        Oakland, CA
      </a>
      <a href='#' data-value="san" class='san dropdown-item'>
        San Francisco, CA
      </a>
    </div>
  </div>
</div>
`;

const dropdown = document.querySelector(".dropdown");

document.querySelector(".dropdown-trigger").addEventListener("click", (e) => {
  dropdown.classList.toggle("is-active");
});

document.addEventListener(
  "click",
  (event) => {
    // event.preventDefault();
    if (event !== null && event.target instanceof HTMLElement) {
      const element = event.target;
      if (element.matches(".dropdown-item.oak")) {
        console.log("Oakland was clicked");

        customMap.addOakland();
        data.forEach((label) => customMap.addCircleMarker(label));
        console.log("inside the if conditional", data);
        dropdown.classList.toggle("active");
      }
      if (element.matches(".dropdown-item.san")) {
        console.log("San Francisco was clicked");
        customMap.addSanFran();
        data.forEach((label) => customMap.addCircleMarker(label));
        dropdown.classList.toggle("active");
      }
    }
  },
  false
);

// Checkbox Menu
const checkboxMenu = document.querySelector(".checkbox");
checkboxMenu.innerHTML = `
<nav class="panel">
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input" type="text" id="myInput" placeholder="Search">
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <ul id="myUL">
    <li><a class="panel-block is-active">
    <input type="checkbox" id="density" name="density" value="density">
      Density
      <span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="holc" name="" value="holc">
      HOLC
      <span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="tcac" name="" value="tcac">
      TCAC
      <span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="population" name="" value="population">
      Population
      <span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="zoning" name="" value="zoning">
      Zoning
      <span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
    </a></li>
  </ul>
</nav>
`;

const fetchLabel = () => {
  let input, filter, ul, li, a, i, textValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    textValue = a.textContent || a.innerText;
    if (textValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
};

const input = document.querySelector("input");
input.addEventListener("input", (event) => {
  fetchLabel();
});

.checkbox {
  position: absolute;
  z-index: 2;
  top: 200px;
  left: 200px;
}

.cales {
  width: 250px;
}

.cities {
  position: absolute;
  z-index: 2;
  top: 95px;
  left: 350px;
  border: 1px solid black;
}

.container {
  display: flex;
}

.fas.fa-circle {
  color: #fe0302;
  padding: 2px;
}

.hero {
  background-color: #e5e7e9;
}

.hero-body {
  padding: 12px;
}

/* style the map box */
#map {
  width: 100%;
  height: 500px;
  overflow: auto !important;
  position: relative;
  /* z-index: -2; */
}

.navbar-item {
  font-weight: bold;
}

.new_units {
  position: absolute;
  z-index: 2;
  top: 95px;
  /* left: 100px; */
  display: flex;
  border: 1px solid black;
}

.overlay {
  position: absolute;
  z-index: 2;
  top: 95px;
  left: 180px;
  border: 1px solid black;
}

.panel {
  background-color: white;
  border: 1px solid black;
}

.title {
  font-size: 4rem;
}

.title:not(:last-child) {
  margin-bottom: 0;
  margin-right: 1.5rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css"
    />
  <link rel="stylesheet" href="src/custom.css">
  <title>CALES Maps POC</title>
</head>
<body>
  <section class="hero">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">
          CALES
        </h1>
        <span class="cales">Comprehensive Assessment of Land Use Entitlements</span>
            <div class="navbar-brand">
              <span class="navbar-burger" data-target="navbarMenuHeroA">
                <span></span>
                <span></span>
                <span></span>
              </span>
            </div>
            <div id="navbarMenuHeroA" class="navbar-menu">
              <div class="navbar-end">
                <a class="navbar-item">
                  Map & Data
                </a>
                <a class="navbar-item">
                  Rankings
                </a>
                <a class="navbar-item">
                  Topics
                </a>
                <a class="navbar-item">
                  Cities
                </a>
                <a class="navbar-item">
                  About
                </a>
                <a class="navbar-item">
                  Updates
                </a>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </section>

  <div id="map" style="height: 100vh;"></div>

    <div class="new_units"></div>

    <div class="overlay"></div>

    <div class="checkbox"></div>

    <div class="cities"></div>
  

  <script type="text/javascript" src="./src/index.ts"></script>
</body>
</html>

S Fiddle 虽然不公平。我会将其复制到代码编辑器并使用浏览器。我有一个朋友在 JS Fiddle 中调整它，使用 display: inline-block 修复它......在 JS Fiddle 中，而不是在浏览器中。

这是 iPad Pro 中的样子：

因此，无论 iPad Pro 视图或附近情况如何，我都试图让该下拉菜单与灰色导航栏齐平。我现在主要担心 iPad Pro 视图。

希望该徽标在调整大小时不会像那样损坏。这全部来自 Bulma CSS.

Answer 1

只需一点 CSS 调整和整合。我删除了为这四个浮动元素中的每一个设置的单独样式集，并将它们添加到一个 .fixed_under_header class 元素中。

这个 CSS 应该可以解决问题：

.hero-body {
  position: relative;
}

.fixed_under_header {
  display: flex;
  justify-content: flex-start;
  position: absolute;
  top: 100%;
  z-index: 2;
}

.fixed_under_header > div {
  border: 1px solid black;
  height: fit-content;
}

.fixed_under_header > div + div {
  margin-left: 10px;
}

这是完整的工作解决方案：

// The Dropdown for New-units
const newUnitDropdown = document.querySelector(".new_units");
newUnitDropdown.innerHTML = `
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
    <i class="fas fa-circle"></i>
    <span>New Units</span>
      <span class="icon is-small">
        <!--fontawesome required for the icon-->
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  </div>
</div>
`;

// The Dropdown for Overlay
const overlayDropdown = document.querySelector(".overlay");
overlayDropdown.innerHTML = `
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Select Overlay</span>
      <span class="icon is-small">
        <!--fontawesome required for the icon-->
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  </div>
</div>
`;

// The Dropdown for Cities
const cityDropdown = document.querySelector(".cities");
cityDropdown.innerHTML = `
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Choose a city</span>
      <span class="icon is-small">
        <!--fontawesome required for the icon-->
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href='#' data-value="oak" class='oak dropdown-item'>
        Oakland, CA
      </a>
      <a href='#' data-value="san" class='san dropdown-item'>
        San Francisco, CA
      </a>
    </div>
  </div>
</div>
`;

const dropdown = document.querySelector(".dropdown");

document.querySelector(".dropdown-trigger").addEventListener("click", (e) => {
  dropdown.classList.toggle("is-active");
});

document.addEventListener(
  "click",
  (event) => {
    // event.preventDefault();
    if (event !== null && event.target instanceof HTMLElement) {
      const element = event.target;
      if (element.matches(".dropdown-item.oak")) {
        console.log("Oakland was clicked");

        customMap.addOakland();
        data.forEach((label) => customMap.addCircleMarker(label));
        console.log("inside the if conditional", data);
        dropdown.classList.toggle("active");
      }
      if (element.matches(".dropdown-item.san")) {
        console.log("San Francisco was clicked");
        customMap.addSanFran();
        data.forEach((label) => customMap.addCircleMarker(label));
        dropdown.classList.toggle("active");
      }
    }
  },
  false
);

// Checkbox Menu
const checkboxMenu = document.querySelector(".checkbox");
checkboxMenu.innerHTML = `
<nav class="panel">
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input" type="text" id="myInput" placeholder="Search">
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <ul id="myUL">
    <li><a class="panel-block is-active">
    <input type="checkbox" id="density" name="density" value="density">
      Density
      <span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="holc" name="" value="holc">
      HOLC
      <span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="tcac" name="" value="tcac">
      TCAC
      <span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="population" name="" value="population">
      Population
      <span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="zoning" name="" value="zoning">
      Zoning
      <span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
    </a></li>
  </ul>
</nav>
`;

const fetchLabel = () => {
  let input, filter, ul, li, a, i, textValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    textValue = a.textContent || a.innerText;
    if (textValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
};

const input = document.querySelector("input");
input.addEventListener("input", (event) => {
  fetchLabel();
});

.hero-body {
  position: relative;
}

.fixed_under_header {
  display: flex;
  justify-content: flex-start;
  position: absolute;
  top: 100%;
  z-index: 2;
}

.fixed_under_header > div {
  border: 1px solid black;
  height: fit-content;
}

.fixed_under_header > div + div {
  margin-left: 10px;
}

.cales {
  width: 250px;
}

.container {
  display: flex;
}

.fas.fa-circle {
  color: #fe0302;
  padding: 2px;
}

.hero {
  background-color: #e5e7e9;
}

.hero-body {
  padding: 12px;
}

/* style the map box */
#map {
  width: 100%;
  height: 500px;
  overflow: auto !important;
  position: relative;
  /* z-index: -2; */
}

.navbar-item {
  font-weight: bold;
}

.panel {
  background-color: white;
  border: 1px solid black;
}

.title {
  font-size: 4rem;
}

.title:not(:last-child) {
  margin-bottom: 0;
  margin-right: 1.5rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css"
    />
  <link rel="stylesheet" href="src/custom.css">
  <title>CALES Maps POC</title>
</head>
<body>
  <section class="hero">
    <header class="hero-body">
      <div class="container">
        <h1 class="title">
          CALES
        </h1>
        <span class="cales">Comprehensive Assessment of Land Use Entitlements</span>
            <div class="navbar-brand">
              <span class="navbar-burger" data-target="navbarMenuHeroA">
                <span></span>
                <span></span>
                <span></span>
              </span>
            </div>
            <div id="navbarMenuHeroA" class="navbar-menu">
              <div class="navbar-end">
                <a class="navbar-item">
                  Map & Data
                </a>
                <a class="navbar-item">
                  Rankings
                </a>
                <a class="navbar-item">
                  Topics
                </a>
                <a class="navbar-item">
                  Cities
                </a>
                <a class="navbar-item">
                  About
                </a>
                <a class="navbar-item">
                  Updates
                </a>
              </div>
            </div>
          </div>
        </nav>
        <div class="fixed_under_header">
          <div class="new_units"></div>
          <div class="overlay"></div>
          <div class="checkbox"></div>
          <div class="cities"></div>
        </div>
      </header>
    </section>

  <div id="map" style="height: 100vh;"></div>
  <script type="text/javascript" src="./src/index.ts"></script>
</body>
</html>

无论视口大小如何变化，都试图使下拉菜单与 header 的边缘齐平

Trying to keep dropdown menus flush to the edge of header regardless of change in viewport size

html

css

bulma