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

包装时减少菜单项之间的垂直间距

whitespace css html

mj1261829 · 技术社区 · 6 年前

看看网站的截图,你会发现第一行和第二行菜单项之间有很大的间隔。我想让这个间距尽可能小。

下面是相关的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 回复 | 直到 5 年前

Hugo 6 年前

请尝试将此添加到您的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
}

Aryan Twanju 6 年前

你只需要在你的css中改变一行。你有 height: 25; 使它 height: 25px . 试试这个代码。

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