Question

我的页面上有以下导航栏，并希望<li>标签将其高度扩展到我的锚点的高度，但由于某种原因，他们忽略了锚点填充（如果你运行，你可以看到这个片段和鼠标悬停在菜单项上。）

任何人都可以解释我做错了什么以及如何解决这个问题？

由于

＆＃13;

#navbar {
  text-align: center;
  background-color: #913D88;
}
@media (min-width: 992px) {
  #navbar {
    border-radius: 10px;
  }
}
#navbar ul {
  list-style: none;
  text-align: center;
}
#navbar ul li {
  font-size: 1.1em;
  font-weight: 400;
  display: inline-block;
}
@media (min-width: 767px) {
  #navbar ul li {
    font-size: 1.2em;
  }
}
#navbar ul li a {
  padding: 0.5em 1em;
  width: 100%;
  height: 100%;
}
@media (min-width: 992px) {
  #navbar ul li a {
    padding: 0.5em 2em;
  }
}
#navbar ul li a:visited, #navbar ul li a:link {
  color: #fff;
  text-decoration: none;
}
#navbar ul li a:hover {
  background-color: #c371ba;
  color: #491f45;
}
#navbar ul li a img {
  height: 1em;
}
#navbar ul .dropdown {
  position: relative;
}
#navbar ul .dropdown:hover > .drop-nav {
  display: block;
}
#navbar ul .dropdown .drop-nav {
  position: absolute;
  top: 95%;
  display: none;
}
#navbar ul .dropdown .drop-nav li {
  width: 200px;
  font-size: 0.8em;
  padding: 0.5em;
  display: block;
  background-color: #913D88;
  border-bottom: 1px solid #fff;
}
#navbar ul .dropdown .drop-nav li:hover {
  color: #491f45;
  background-color: #c371ba;
}
#navbar ul .dropdown .drop-nav a {
  font-size: 1em;
  line-height: 1.3em;
}
#navbar ul .dropdown .drop-nav a:visited, #navbar ul .dropdown .drop-nav alink {
  color: #fff;
  text-decoration: none;
}

＆＃13;

<div id="navbar" ng-controller="NavbarController">
  <ul>
    <li ng-click="goTo('http://www.ijs.si/ijsw')"><a href="">IJS</a>
    </li>
    <li class="dropdown"><a href="">knjižnica&nbsp;<span class="ion-arrow-down-b"></a>
      <ul class="drop-nav">
        <li ng-click="goTo('#/predstavitev')"><a href="">predstavitev</a>
        </li>
        <li><a href="">osebje</a>
        </li>
      </ul>
    </li>
    <li class="dropdown"><a href="#">zaloga&nbsp;<span class="ion-arrow-down-b"></a>
      <ul class="drop-nav">
        <li><a href="">tiskane revije</a>
        </li>
        <li><a href="">elektronske revije</a>
        </li>
        <li><a href="">baze podatkov</a>
        </li>
        <li ng-click="goTo('http://www.cobiss.si/scripts/cobiss?command=CONNECT&amp;base=50108')"><a href="">katalog (COBISS)</a>
        </li>
      </ul>
    </li>
    <li class="dropdown"><a href="">storitve&nbsp;<span class="ion-arrow-down-b"></a>
      <ul class="drop-nav">
        <li><a href="">medknjižnična izposoja</a>
        </li>
        <li><a href="">fotokopirnica</a>
        </li>
        <li><a href="">bibliografije</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="">
        <img src="images/EN.gif">
      </a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

为display:block

添加#navbar ul li a

Answer 2

默认情况下，锚点为display:inline，这意味着填充不起作用。只有你需要做的就是为你锚定display: block（或display:inline-block）。

#navbar ul li a {
  display:block;
}

html <li>标签不会扩展以包裹锚填充

2 个答案: