当发生换行时，减少菜单项之间的垂直空间

时间：2018-06-05 11:36:23

标签： html css whitespace

查看网站的屏幕截图，您会看到第一行和第二行菜单项之间有很大的间距。我想让这个间距尽可能低。

以下是相关的css：

.gva-navigation {
  width: 100%;
  /* Spans the width of the page */
  height: 50px;
  margin: 0;
  /* Ensures there is no space between sides of the screen and the menu */
  z-index: 99;
  /* Makes sure that your menu remains on top of other page elements */
  position: relative;
}

#wrap {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute;
  /* Ensures that the menu doesn’t affect other elements */
  #border-right: 1px solid #54879d;
}

.gva-navigation li {
  height: 25;
  width: auto;
  /* Each menu item is 150px wide */
  #float: left;
  /* This lines up the menu items horizontally */
  #text-align: center;
  /* All text is placed in the center of the box */
  list-style: none;
  /* Removes the default styling (bullets) for the list */
  padding: 0;
  margin: 0;
}

.gva-navigation a {
  display: block;
}

.gva-navigation>ul>li>ul {
  display: none;
}

.gva-navigation>ul>li:hover>ul {
  display: inline;
}
<div class="gva-navigation">
  <ul id="wrap" class="clearfix gva_menu gva_menu_main">
    <li class="menu-item menu-item--collapsed">
      <a target="_self" href="en/Mission_and_Vision.html">
                        Mission and Vision</a>
    </li>
    <li class="menu-item menu-item--expanded">
      <a target="_self" href="#">
                        Departments <span class="icaret nav-plus fa fa-angle-down"></span> </a>
      <ul class="menu sub-menu" style="margin-top: -30px;">
        <li class="menu-item">
        </li>
        <li class="menu-item">
          <a target="" href="en/Economics.html">
                        ECONOMICS/ISLAMIC ECONOMICS</a>
        </li>
        <li class="menu-item">
          <a target="" href="en/Finance.html">
                 FINANCE/ISLAMIC FINANCE</a>
        </li>
        <li class="menu-item">
          <li class="menu-item menu-item--expanded">
            <a target="" href="en/Training.html">
                        TRAINING </a>
          </li>
          <li class="menu-item mune-item--expanded">
            <a target="" href="en/Information_Center.html">
                        INFORMATION CENTER </a>
          </li>
          <li class="menu-item mune-item--expanded">
            <a target="" href="en/JOURNAL_OF_NEW_ECONOMICS.html">
            JOURNAL OF NEW ECONOMICS </a>
          </li>
      </ul>
      </li>
      <li class="menu-item menu-item--expanded">
        <a target="" href="#">
                        Teaching & Performance <span class="icaret nav-plus fa fa-angle-down"></span></a>
        <ul class="menu sub-menu" style="margin-top: -30px;">
          <li class="menu-item">
            <a target="" href="en/Teaching_Approaches.html">
                        Teaching Approaches</a>
          </li>
          <li class="menu-item">
            <a target="" href="en/Midway_Approach.html">
                        Midway Approach</a>
            <li class="menu-item">
              <a target="" href="en/Graduates_Profile.html">
                    Graduates Profile</a>
            </li>
        </ul>
        </li>
        <li class="menu-item menu-item--expanded">
          <a target="_self" href="#">
                        Admissions <span class="icaret nav-plus fa fa-angle-down"></span> </a>
          <ul class="menu sub-menu" style="margin-top: -30px;">
            <li class="menu-item">
              <a target="" href="en/students.html">
                        Admission Requirements <span class="icaret nav-plus fa fa-angle-down"></span></a>
              <ul class="menu sub-menu">
                <li class="menu-item">
                  <a target="" href="en/3_Tracks_for_BA_Holders.html">
                        3 Tracks for BA Holders</a>
                </li>
                <li class="menu-item">
                  <a target="" href="en/Grades.html">
                        Grades</a>
                </li>
                <li class="menu-item">
                  <a target="" href="en/Language_Requirements.html">
                        Language Requirements</a>
                </li>
                <li class="menu-item">
                  <a target="" href="en/Admission_Course_Requirements.html">
                        Admission Course requirements</a>
                </li>
              </ul>
            </li>
            <li class="menu-item">
              <a target="" href="https://obs.asbu.edu.tr/oibs/ogrenci/login.aspx">
                        Applications and Deadlines  </a>
            </li>
            <li class="menu-item">
              <a target="" href="https://www.asbu.edu.tr/tr/akademik-takvim">
                        International Students  </a>
            </li>
            <li class="menu-item">
              <a target="" href="en/student-work-forms.html">
                        Apply </a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item--expanded">
          <a target="_self" href="#">
                        Student <span class="icaret nav-plus fa fa-angle-down"></span> </a>
          <ul class="menu sub-menu" style="margin-top: -30px;">
            <li class="menu-item">
              <a target="" href="en/students.html">
                        For Students  </a>
            </li>
            <li class="menu-item">
              <a target="" href="https://obs.asbu.edu.tr/oibs/ogrenci/login.aspx">
                        Student Information System  </a>
            </li>
            <li class="menu-item">
              <a target="" href="https://www.asbu.edu.tr/tr/akademik-takvim">
                        Academic Calendar  </a>
            </li>
            <li class="menu-item">
              <a target="" href="en/student-work-forms.html">
                        Student Work Forms  </a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item--expanded">
          <a target="_self" href="#">
                        Course Requirements<span class="icaret nav-plus fa fa-angle-down"></span> </a>
          <ul class="menu sub-menu" style="margin-top: -30px;">
            <li class="menu-item">
              <a target="" href="en/MA_and_PHD_in_Economics.html">
                        MA & PHD IN ECONOMICS/ISLAMIC ECONOMICS <br> (DOUBLE MAJOR)</a>
            </li>
            <li class="menu-item">
              <a target="" href="en/MA_and_PHD_in_Finance.html">
                         MA & PHD IN FINANCE/ISLAMIC<br>FINANCE<br>(DOUBLE MAJOR)</a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item--expanded">
          <a target="_self" href="#">About&nbsp;<span class="icaret nav-plus fa fa-angle-down"></span></a>
          <ul class="menu sub-menu" style="margin-top: -30px;
        left: -100px;">
            <li class="menu-item" style="display: inline-block">
              <a target="_self" href="#">
                        Founding Stage<span class="icaret nav-plus fa fa-angle-down"></span> </a>
              <ul class="menu sub-menu">
                <li class="menu-item">
                  <a target="" href="en/background.html" style="white-space: nowrap;">
                        Background  </a>
                </li>
                <li class="menu-item">
                  <a target="" href="en/objectives.html">
                        Objectives  </a>
                </li>
                <li class="menu-item">
                  <a target="" href="en/name.html">
                        Name  </a>
                </li>
                <li class="menu-item">
                  <a target="" href="en/approach.html">
                        Approach  </a>
                </li>
              </ul>
            </li>
            <li class="menu-item">
              <a target="_self" href="en/Faculty.html">
                        Faculty </a>
            </li>
            <li class="menu-item">
              <a target="" href="https://asbu.edu.tr/tr/iletisim-bilgileri">
                        Contact Information  </a>
            </li>
            <li class="menu-item">
              <a target="" href="en/contact.html">
                        Contact Form  </a>
            </li>
            <li class="menu-item">
              <a target="" href="https://asbu.edu.tr/tr/ulasim">
                        Transportation  </a>
            </li>
            <li class="menu-item">
              <a target="" href="https://asbu.edu.tr/tr/contact/bilgi_edinme">
                        Getting Information  </a>
            </li>
            <li class="menu-item">
              <a target="_self" href="en/Stages_of_Implementation.html">
                        Stages of Implementation </a>
            </li>
            <li class="menu-item">
              <a target="" href="en/Organisational_Chart.html">
                        Organisational Chart  </a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item--collapsed">
          <a target="_self" href="en/Annotated_List_of_Courses.html">
                        Annotated List of Courses </a>
        </li>
  </ul>
</div>

如何减少顶部菜单项与包裹到第二行或第二行的其他菜单项之间的垂直间距？

2 个答案:

答案 0 :(得分：0)

您只需更改CSS中的一行即可。您有height: 25;，请将其设为height: 25px。试试这段代码。

.gva-navigation li {
    height: 25px;
}

答案 1 :(得分：0)

请尝试将此添加到您的css：

#wrap {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute; /* Ensures that the menu doesn’t affect other elements */
  #border-right: 1px solid #54879d;
  line-height:12px
}
相关问题
最新问题