Блог

Главная - Вопросы по программированию - не удается выровнять элементы в обертке

не удается выровнять элементы в обертке

#javascript #html #css

Вопрос:

Я создаю фиксированную панель навигации. В этом все в порядке, кроме выпадающего списка. Я несколько раз пытался выровнять выпадающий список с другими полями ввода и кнопками, но не смог этого сделать.

Это главное из всего остального. Как я могу опустить раскрывающийся список и выровнять его с остальными?

Я был бы признателен, если бы кто-нибудь мог помочь мне с этой проблемой.

 const select = document.querySelectorAll(".selectBtn");
const option = document.querySelectorAll(".option");
let index = 1;

select.forEach((a) => {
  a.addEventListener("click", (b) => {
    const next = b.target.nextElementSibling;
    next.classList.toggle("toggle");
    next.style.zIndex = index  ;
  });
});
option.forEach((a) => {
  a.addEventListener("click", (b) => {
    b.target.parentElement.classList.remove("toggle");

    const parent = b.target.closest(".select").children[0];
    parent.setAttribute("data-type", b.target.getAttribute("data-type"));
    parent.innerText = b.target.innerText;
  });
}); 
 .container4header {
  background-color: red;
  position: fixed;
  top: 0;
  width: 100%;
}

.wrapper {
  padding: 25px 30px;
  background-color: rgb(255, 2, 2);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-button {
  font-family: "Arial";
  text-transform: none;
  outline: 0;
  background-color: #08ac4b;
  width: 100px;
  border: 1px solid;
  padding: 15px;
  color: #ffffff;
  font-size: 15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 0 20px;
}

.searchitems {
  font-family: "Arial";
  outline: 0;
  color: #000000;
  background: #ffffff;
  width: 350px;
  border: 1px solid;
  margin: 0 0 20px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
}

.searchitems:focus {
  outline: none;
  border: 1px solid #08ac4b;
  box-shadow: 0 0 1px #08ac4b;
}

#citySearch {
  font-family: "Arial";
  outline: 0;
  color: #000000;
  background: #ffffff;
  width: 250px;
  border: 1px solid;
  margin: 0 0 20px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
}

#citySearch:focus {
  outline: none;
  border: 1px solid #08ac4b;
  box-shadow: 0 0 1px #08ac4b;
}

.button2 {
  font-family: "Arial";
  text-transform: none;
  outline: 0;
  background-color: #252525;
  width: 100px;
  border: 1px solid;
  padding: 10px 15px;
  color: #ffffff;
  font-size: 15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 0 20px;
}

.select {
  font-size: 15px;
  text-align: left;
  box-sizing: border-box;
  content: "";
  font-family: "Arial";
  outline: none;
  border: 1px solid;
  background: #ffffff;
  border-radius: 5px;
  margin: 0 0 20px;
  color: #000000;
  position: relative;
  order: 0;
  width: 250px;
}

.select .selectBtn {
  background: var(--bg1);
  padding: 15px;
  box-sizing: border-box;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fff;
}

.select .selectBtn:after {
  content: "";
  position: absolute;
  top: 45%;
  right: 15px;
  width: 6px;
  height: 6px;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid rgb(0, 0, 0);
  border-bottom: 2px solid rgb(0, 0, 0);
  transition: 0.2s ease;
}

.select .selectBtn.toggle {
  border-radius: 5px;
}

.select .selectBtn.toggle:after {
  -webkit-transform: translateY(-50%) rotate(-135deg);
  transform: translateY(-50%) rotate(-135deg);
}

.select .selectDropdown {
  box-sizing: border-box;
  font-size: 15px;
  padding: 5px;
  text-align: left;
  font-family: "Arial";
  max-height: 240px;
  color: #000000;
  position: absolute;
  width: 100%;
  border-radius: 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  background: var(--bg1);
  border-top: 1px solid #eee;
  z-index: 1;
  background: #ffffff;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  -webkit-transform-origin: top center;
  transform-origin: top center;
  visibility: visible;
  transition: 0.2s ease;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

.select .selectDropdown .option {
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.select .selectDropdown .option:hover {
  background: #edf7f1;
}

.select .selectDropdown.toggle {
  visibility: visible;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
} 
 <div class="container4header">
  <div class="wrapper">
    <img href="https://cdn.logo.com/hotlink-ok/logo-social.png" alt="logo" width="30" height="30">
    <div class="center-group">

      <div class="select">
        <div class="selectBtn" data-type="firstOption">
          Choose a category
        </div>
        <div class="selectDropdown">
          <div class="option" data-type="firstOption">Choose a category</div>
          <div class="option" data-type="firstOption">All categories</div>
          <div class="option" data-type="firstOption">Books</div>
          <div class="option" data-type="secondOption">Clothing</div>
          <div class="option" data-type="thirdOption">Electronics</div>
          <div class="option" data-type="forthOption">Education Supplies</div>
          <div class="option" data-type="fifthOption">Food and Drinks</div>
          <div class="option" data-type="sixthOption">Footwear</div>
          <div class="option" data-type="sixthOption">Health amp; Nutrition</div>
          <div class="option" data-type="sixthOption">Home Appliances amp; Furniture</div>
          <div class="option" data-type="sixthOption">Kitchen Appliances</div>
          <div class="option" data-type="sixthOption">Pet Supplies</div>
          <div class="option" data-type="sixthOption">Toys</div>
          <div class="option" data-type="sixthOption">Others</div>
        </div>
      </div>

      <input id="citySearch" type="text" placeholder="City">
      <input type="text" class="searchitems" placeholder="Search for an item">
      <button type="submit" class="search-button">Search</button>
    </div>
    <div class="right-group">
      <button type="submit" class="button2">Sign Up</button>
      <button type="submit" class="button2">Sign In</button>
    </div>
  </div>
</div>

Комментарии:

1. Дочерние элементы <div class="center-group"> не являются гибкими элементами; это просто обычный блок — контейнер с нормальным потоком внутри. Есть также order: 0; правило, которое ничего не делает по той же причине. Вы могли бы попробовать сделать эту еще одну гибкую коробку. В качестве альтернативы установите значение <div class="select"> в display: inline flow-root; (или display: inline-block; для совместимости). Кроме того, удалите content: ""; из .select ; это не псевдоэлемент.

Метки: