J. Doe J. Doe - 1 month ago 10
CSS Question

Expanding clickable area of anchor element

In my nav bar, there is one button which is floated to the right with a padding of 200px.

However, the clickabale area isn't expanded. What is a proper way to solve this issue?

Page Design



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>





If I change the last line of code to exactly the same but 4th child it doesn't respond to the padding.

The same if I change to
li a:nth-of-type(6)
or
li:nth-of-type(6) a
.

Magically, if I change the padding from the first child it works perfectly fine.

Answer

You have this on the li:

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

Instead, apply that rule to the a:

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

jsFiddle demo