如何在没有引导程序的情况下在移动设备上创建导航栏下拉列表全宽

Question

我的目标是制作当我在移动设备上点击#myDropdown div全宽时显示的下拉列表，但到目前为止我尝试的内容都没有用。我没有使用bootstrap（我也不能）。

/* DROPDOWN */

#navbar_reservas {
  height: 70px;
}

#reservas_left {
  float: left;
  width: 49%;
}

#reservas_right {
  float: left;
  width: 49%;
}

#inner_reservas_left {
  float: right;
}

#inner_reservas_right {
  float: left;
}

#totalprice {
  font-size: 20px;
  font-weight: bold;
}

#navbar_reservas .dropbtn,
#navbar_reservas #dudas {
  font-family: "Quicksand", sans-serif;
}

#drop4 {
  display: none;
}

#drop5 {
  display: none;
}

#drop6 {
  display: none;
}

.dropdown_reservas .dropbtn {
  height: 80px;
}

.dropdown-content_reservas {
  position: fixed;
  color: #333;
}

.dropbtn {
  margin-left: 50px;
}

#myDropdown {
  text-align: left;
  padding: 1%;
  padding-right: 3%;
  font-family: "Quicksand", sans-serif;
  margin-top: 0;
  list-style-type: none;
}

#myDropdown li {
  list-style-type: none;
}

<div id="navbar_reservas">
  <div id="reservas_left">
    <div class="nav-item_reservas" id="inner_reservas_left">
      <a id="dudas" href="tel:555555555">
                    ¿Dudas?
                    <br />555 555 555
                </a>
    </div>
  </div>
  <div id="reservas_right">
    <div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
      <div class="dropbtn">
        TOTAL
        <br /><span id="totalprice">0,00€</span>
        <i class="material-icons">arrow_drop_down</i>
      </div>
      <div class="dropdown-content_reservas" id="myDropdown">
        <ul id="dropul" class="unoul">
          <li id="drop1"></li>
          <li id="drop2"></li>
          <li id="drop3"></li>
          <li id="drop4"></li>
          <li id="drop5"></li>
          <li id="drop6"></li>
        </ul>

      </div>
    </div>
  </div>

</div>

如果我添加：

@media (max-width: 760px){
    #myDropdown{
        width:100%;
    }
    #reservas_right {
        width:100%;
    }
}

dropdown div确实变成了我想要的全宽，但是当然，现在#myDropdown div落在下面的一个新行上，所以div不再居中，而是在两个全宽行上，这不是我的想。我想只有一行，两个div居中，这是我所拥有的，但我不知道如何使下拉列表全宽，同时保持其父div 49％div。只在手机上做这个！我知道这听起来很复杂。我希望你们能理解我的意思！

Answer 1

HTML

<div id="navbar_reservas">
<div id="reservas_left">
<div class="nav-item_reservas" id="inner_reservas_left">
  <a id="dudas" href="tel:555555555">
                ¿Dudas?
                <br />555 555 555
            </a>
</div>
</div>
<div id="reservas_right">
<div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
  <div class="dropbtn" onclick="divhide()">
    TOTAL
    <br /><span id="totalprice">0,00€</span>
    <i class="material-icons">arrow_drop_down</i>
  </div>
</div>
</div>
<div class="dropdown-content_reservas" id="myDropdown">
<ul id="dropul" class="unoul">
  <li id="drop1">1</li>
  <li id="drop2">2</li>
  <li id="drop3">3</li>
  <li id="drop4">4</li>
  <li id="drop5">5</li>
  <li id="drop6">6</li>
</ul>

</div>

</div>

CSS

/* DROPDOWN */

#navbar_reservas {
height: 70px;
}

#reservas_left {
float: left;
width: 49%;
margin-bottom: 1%;
}

#reservas_right {
float: left;
width: 49%;
margin-bottom: 1%;
}

#inner_reservas_left {
float: right;
}

#inner_reservas_right {
float: left;
}

#totalprice {
font-size: 20px;
font-weight: bold;
}

#navbar_reservas .dropbtn,
#navbar_reservas #dudas {
font-family: "Quicksand", sans-serif;
}

#drop4 {
display: none;
}

#drop5 {
display: none;
}

#drop6 {
display: none;
}

.dropdown_reservas .dropbtn {
height: 80px;
}

.dropdown-content_reservas {
position: fixed;
color: #333;
}

.dropbtn {
margin-left: 50px;
}

#myDropdown {
text-align: left;
padding: 1%;
padding-right: 3%;
font-family: "Quicksand", sans-serif;
margin-top: 2%;
list-style-type: none;
display: none;
float: right;
width: 49%;
margin-left: 51%;
}

#myDropdown li {
list-style-type: none;
}

@media (max-width: 760px) {
#myDropdown {
width: 100%;
overflow: auto;
display: none;
margin-left: 0%;
}
}

用于显示和隐藏下拉菜单的JavaScript

function divhide() {
if (document.getElementById('myDropdown').style.display == 'block') {
document.getElementById('myDropdown').style.display = 'none';}
else {
document.getElementById('myDropdown').style.display = 'block';}
}

基本上我已将div移到容器外部并复制到桌面版桌面CSS上，并为移动版本创建了新的CSS。您看到的所有屏幕上的主显示屏位于同一行，但下拉div必须位于单独的行上，除非您想对灯箱执行某些操作。 JavaScript就是激活下拉菜单的基本实现。这是您的基本答案，最终可能不是您想要的。