扩展锚元素的可点击区域

Question

在我的导航栏中，有一个按钮向右浮动，填充为200px。

但是，clickabale区域未展开。什么是解决这个问题的正确方法？

body {
  font-family: impact;
  margin: 0;
  padding: 0;
}
div.content {
  height: 1000px;
  background-color: pink;
}
footer {
  background-color: yellow;
  height: 250px;
}
.menu-header a:link {
  color: white;
  text-decoration: none;
}
.menu-header a:hover {
  background: #000;
}
.menu-header {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  background-color: #333;
  position: relative;
  height: 100%;
  overflow: auto;
}
ul.menu-header li a {
  float: left;
  padding: 10px;
}
ul.menu-header li:nth-of-type(6) {
  float: right;
  /*last button on the right-hand side*/
}
li:nth-of-type(6) {
  padding-right: 200px;
}

<header>
  <ul class="menu-header">
    <li>
      <a href="index.html">
        <img width="13px" height="13px" src="images/fridge.png">What's Left?</a>
    </li>
    <li>
      <a href="fridge.html">Mein Kühlschrank</a>
    </li>
    <li>
      <a href="buylist.html">Einkaufsliste</a>
    </li>
    <li>
      <a href="recipe.html">Rezepte vorschlagen</a>
    </li>
    <li>
      <a href="kontakt.html">Kontakt</a>
    </li>
    <li>
      <a href="login.html">Menü</a>
    </li>
  </ul>
</header>
<div class="content">
  Ich bin der Inhalt</br>
  und ich meine es verdammt ernst
</div>
<footer>
  ich bin der Fuss
</footer>

如果我将最后一行代码更改为完全相同但第4个子代码，则它不会响应填充。

如果我更改为li a:nth-of-type(6)或li:nth-of-type(6) a，则相同。

奇怪的是，如果我从第一个孩子那里更换填充物，它的效果非常好。

Answer 1

你在li：

上有这个

li:nth-of-type(6) {
    padding-right: 200px;
}

相反，请将该规则应用于a：

li:nth-of-type(6) a {
    padding-right: 200px !important; /* you may need to override other rules */
}

jsFiddle demo