CODEWITHSUNDEEP
htmlcss
Jason
Jason

Reputation: 431

Full width li elements

I am trying to make the list elements of this list full width. They had padding on them and when you hover on them the padding is coloured yellow.

The padding isn't filling up the whole ul block which is what I want it to do.

I have tried using different displays and making the width of the list element 100% but this doesn't work.

.footer-navigation {
  list-style: none;
  padding-left: 0px;
  display: inline-block;
  width: 100%;
}
.footer-navigation li {
  padding: 10px;
  width: 100%;
}
.footer-navigation a {
  padding: 10px;
  color: #000000;
}
.footer-navigation a:hover {
  padding: 10px;
  color: #ffffff;
  background-color: #fac900;
}
<ul class="footer-navigation">
  <li><a href="#">Terms &amp; Conditions</a>
  </li>
  <li><a href="#">Cookie Policy</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
</ul>

Upvotes: 2

Views: 7112

Answers (5)

Heads_Tails_Hails
Heads_Tails_Hails

Reputation: 39

The issue here is that you are styling the anchor element itself, which is by default an inline element. By simply changing your CSS :hover from targeting the element to targeting the

  • element, you achieve the desired result.

    Here is the changed CSS class, and a jsfiddle of what I mean:

    .footer-navigation li:hover {
padding: 10px; 
color: #ffffff;
background-color: #fac900;

    }

    https://jsfiddle.net/69ywk05b/

    There are other improvements that can be made, for example:

    • padding on both
    • the color change on hover is lost when targeting

    here is a more refactored version of your css:

    .footer-navigation {
list-style: none;
padding-left: 0px;
}

.footer-navigation li {
    padding: 15px;
}

.footer-navigation a {
    color: #000000;
}
.footer-navigation li:hover {
    background-color: #fac900;
}

.footer-navigation li:hover a {
    color: #ffffff; 
}

    Upvotes: 0

    • ZP Baloch
    ZP Baloch

    Reputation: 391

    actualy you padding isn't changing color to yellow on hovw.it is anchor tag. Change it toli:hover to change color of full li item. Here is fiddle

    .footer-navigation {
  list-style: none;
  padding-left: 0px;
  display: inline-block;
  width: 100%;
}
.footer-navigation li {
  padding: 10px;
  width: 100%;
}
.footer-navigation a {
  padding: 10px;
  color: #000000;
}
.footer-navigation li:hover {
  padding: 10px;
  color: #ffffff;
  background-color: #fac900;
}
    <ul class="footer-navigation">
  <li><a href="#">Terms &amp; Conditions</a>
  </li>
  <li><a href="#">Cookie Policy</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
</ul>

    Upvotes: 1

    Khaled Mashaly
    Khaled Mashaly

    Reputation: 1185

    The <li>s actually occupy full width of parent <ul>, the problem here is that you're applying the hover effect on the <a> links inside the <li>s not the <li>s themselves. <a>s are inline elements they occupy the width of their text only.

    you can solve this by applying display: inline-block; to the <a>s.

    .footer-navigation {
  list-style: none;
  padding-left: 0px;
  display: inline-block;
  width: 100%;
}
.footer-navigation li {
  padding: 10px;
  width: 100%;
}
.footer-navigation a {
  padding: 10px;
  color: #000000;
  width: 100%;
  display: inline-block;
}
.footer-navigation a:hover {
  color: #ffffff;
  background-color: #fac900;
}
    <ul class="footer-navigation">
  <li><a href="#">Terms &amp; Conditions</a>
  </li>
  <li><a href="#">Cookie Policy</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
</ul>

    Upvotes: 0

    j08691
    j08691

    Reputation: 207881

    Make your anchors block level instead of inline. You can also add box-sizing so that they don't poke out and extend beyond the right edge:

    .footer-navigation {
  list-style: none;
  padding-left: 0px;
  display: inline-block;
  width: 100%;
}
.footer-navigation li {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}
.footer-navigation a {
  padding: 10px;
  color: #000000;
  display: block;
}
.footer-navigation a:hover {
  padding: 10px;
  color: #ffffff;
  background-color: #fac900;
}
    <ul class="footer-navigation">
  <li><a href="#">Terms &amp; Conditions</a>
  </li>
  <li><a href="#">Cookie Policy</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
</ul>

    Upvotes: 8

    Matt Spinks
    Matt Spinks

    Reputation: 6698

    The issue here is that you're yellow background is showing on the a element. Your 'lielement **is** 100% width, but the highlight is showing on thea` element, which is not 100% width.

    Add this css:

    .footer-navigation li:hover {
    color: #ffffff;
    background-color: #fac900;
}

    and remove this:

    .footer-navigation li:hover {
    color: #ffffff;
    background-color: #fac900;
}

    Working example: https://jsfiddle.net/mspinks/vj04zs2g/

    Upvotes: 0

    Related Questions