Question

我有一个菜单按钮，并且一切正常。但是，该按钮在我的页面上显得很高。即使在my fiddle example中，无论改变什么，我似乎都无法改变高度，为什么？

我在任何地方都看不到指定的高度吗？

  * {
      margin: 0px;
      padding: 0px;
    }

    body {
     background-color: lightblue;
    }

    .navbar {
    width: 50%;
    display: block;
    margin: 50px auto;
    padding: 8px 10px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }

    .navbar div {
    height: 5px !important;
    background: #fff;
    margin: 7px 0px 7px 0px;
    border-radius: 25px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }

    .two {
    width: 35px;
    }

    .three {
    width: 50px;
    }

    .navbar:hover div {
     width: 60px;
    }

     .dropdown {
      position: relative;
      display: inline-block;
     }

      .dropbtn {
      background-color: #9FACEC;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      width: 100%;
     }

     .dropbtnSub {
       background-color: #f1f1f1;
       color: black;
       padding: 16px;
       font-size: 16px;
       border: none;
       width: 100%;
     }

     .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
     }

      /* Links inside the dropdown */
     .dropdown-content li {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      position: relative;
      }

      /* Change color of dropdown links on hover */
     .dropdown-content li:hover {background-color: #ddd;}

     .dropbtnSub-content:hover {background-color: #4C66E9;}

     /* Show the dropdown menu on hover */
     .dropdown:hover .dropdown-content {display: block;}

     .dropdown:hover .dropbtn {background-color: #4C66E9;}

     .dropdown-content-list {
      display: none;
     }

     .dropdown-content-list:hover {
       display: block !important;
      }

     .dropdown-content-li:hover .dropdown-content-list {
      display: block;
      position: absolute;
      left: 100%;
      top: 0;
      background: #efefef;
     }

<div class="dropdown">
  <button class="dropbtn">
  <div class="navbar">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  </button> 
  <div class="dropdown-content">
    <ul>
      <li class="dropdown-content-li">
          <button class="dropbtnSub" value="Region">Country</button>
          <div class="dropdown-content-list">
            <ul>
              <li>Japan</li>
              <li>South America</li>
              <li>Europe</li>
            </ul>
          </div>
      </li>
      <li class="dropdown-content-li">
      <button class="dropbtnSub">Export</button>
          <div class="dropdown-content-list">
            <ul>
              <li>Excel</li>
              <li>CSV</li>
            </ul>
          </div>
      </li>
    </ul>
  </div>
</div>

Answer 1

尝试将自定义类导航栏中应用的边距从50px更改为0px

  * {
      margin: 0px;
      padding: 0px;
    }

    body {
     background-color: lightblue;
    }

    .navbar {
    width: 50%;
    display: block;
    margin: 0px;
    padding: 8px 10px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }

    .navbar div {
    height: 5px !important;
    background: #fff;
    margin: 7px 0px 7px 0px;
    border-radius: 25px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }

    .two {
    width: 35px;
    }

    .three {
    width: 50px;
    }

    .navbar:hover div {
     width: 60px;
    }

     .dropdown {
      position: relative;
      display: inline-block;
     }

      .dropbtn {
      background-color: #9FACEC;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      width: 100%;
     }

     .dropbtnSub {
       background-color: #f1f1f1;
       color: black;
       padding: 16px;
       font-size: 16px;
       border: none;
       width: 100%;
     }

     .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
     }

      /* Links inside the dropdown */
     .dropdown-content li {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      position: relative;
      }

      /* Change color of dropdown links on hover */
     .dropdown-content li:hover {background-color: #ddd;}

     .dropbtnSub-content:hover {background-color: #4C66E9;}

     /* Show the dropdown menu on hover */
     .dropdown:hover .dropdown-content {display: block;}

     .dropdown:hover .dropbtn {background-color: #4C66E9;}

     .dropdown-content-list {
      display: none;
     }

     .dropdown-content-list:hover {
       display: block !important;
      }

     .dropdown-content-li:hover .dropdown-content-list {
      display: block;
      position: absolute;
      left: 100%;
      top: 0;
      background: #efefef;
     }

<div class="dropdown">
  <button class="dropbtn">
  <div class="navbar">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  </button> 
  <div class="dropdown-content">
    <ul>
      <li class="dropdown-content-li">
          <button class="dropbtnSub" value="Region">Country</button>
          <div class="dropdown-content-list">
            <ul>
              <li>Japan</li>
              <li>South America</li>
              <li>Europe</li>
            </ul>
          </div>
      </li>
      <li class="dropdown-content-li">
      <button class="dropbtnSub">Export</button>
          <div class="dropdown-content-list">
            <ul>
              <li>Excel</li>
              <li>CSV</li>
            </ul>
          </div>
      </li>
    </ul>
  </div>
</div>

Answer 2

将margin: 0 auto放在.navbar上。

Answer 3

从 .navbar 更改为{ margin：50px auto; }至 .navbar {margin：0px auto;} ，或者您也可以将 -5px自动用于较小的按钮

按钮很高，不能改变高度

3 个答案: