CODEWITHSUNDEEP
htmlcss
Gnarlyeah
Gnarlyeah

Reputation: 17

Resize clickable area

I'm having trouble on how I can adjust the click area.

Please see details below:

enter image description here

As you can see on the image, The cursor is way way far from the letter but still shows that it is still clickable at that distance.

Below is the code I have, I'll just show a couple of it to avoid me getting confused.

li {
font-size: 20px;
display: inline;
padding-right: 20px;
border: 0px;
}

ul.list li:nth-child(-n+26) a{
font-size: 15px;
color: red;
display: list-item;
z-index: 1;
text-decoration: none;
right: 0;
left: 0;
top: 0;
bottom: 0;
}

.onclick div:target {
display: block;
}

.onclick div:hover {
background-color: red;
color: white;
}
<nav>
  <div>
    <ul class="list">
      <li><a href="pageA.html">A</a></li>
      <li><a href="pageB.html">B</a></li>
      <li><a href="pageC.html">C</a></li>
      <li><a href="pageD.html">D</a></li>
      <li><a href="pageE.html">E</a></li>
    </ul>
   </div>
  </nav>

Already tried to add it on the multiple child style, sub nav and separate LI style, But none of it works.

Upvotes: 0

Views: 138

Answers (3)

Challenge Win
Challenge Win

Reputation: 114

You can add "width" style of a tag.

ul.list li:nth-child(-n+26) a{
    width: fit-content;
}

I hope this will help you.

Upvotes: 1

ninadepina
ninadepina

Reputation: 666

Add display: inline-block to your ul and your problem will be fixed!

Upvotes: 1

rodrigocfaria
rodrigocfaria

Reputation: 440

This might be helpful:

li {
font-size: 20px;
display: inline;
padding-right: 20px;
border: 0px;
}

ul.list li:nth-child(-n+26) a{
font-size: 15px;
color: red;
display: list-item;
z-index: 1;
text-decoration: none;
position: relative;
margin: 0; border: 0; padding: 0;
float: left;
clear: left;
}

.onclick div:target {
display: block;
}

.onclick div:hover {
background-color: red;
color: white;
}
<nav>
  <div>
  <ul class="list">
    <li><a href="pageA.html">A</a></li>
    <li><a href="pageB.html">B</a></li>
    <li><a href="pageC.html">C</a></li>
    <li><a href="pageD.html">D</a></li>
    <li><a href="pageE.html">E</a></li>
  </ul>
  </div>
</nav>

Upvotes: 1

Related Questions