代码之家  ›  专栏  ›  技术社区  ›  mHelpMe

纽扣很高,不能改变高度

  •  0
  • mHelpMe  · 技术社区  · 6 年前

    我有一个菜单按钮,一切正常。不过,这个按钮在我的页面上显得相当高。即使在 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>
    3 回复  |  直到 6 年前
        1
  •  2
  •   Deepak Verma    6 年前

    尝试将自定义类导航栏中应用的边距从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>
        2
  •  1
  •   leonsaysHi    6 年前

    margin: 0 auto .navbar .

        3
  •  0
  •   Arunph    6 年前

    从变化 导航栏 { 边距:50px自动; }到 .navbar页边距:0px auto; 或者你也可以用 5PX汽车 对于较小尺寸的按钮