CODEWITHSUNDEEP
htmlcss
Makla
Makla

Reputation: 10459

In ul -> li -> a design li does not expand height to match a tag height

Can someone please explain to me, why li and ul does not expand in plunkr bellow?

I know many has been written about that, but all I found is playing with overflow, height, position and display css properties. I do not use any of that.

a {
        padding: 1em;
        background-color: red;
      }
      ul {
        list-style: none;
        background-color: yellow;
        display: flex; 
      }
      
      li {
        background-color: green;
        display: inline-block;
      }
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <ul>
     <li>
       <a href="http://google.si">google</a>
     </li>
     <li>
       <a href="http://sometest.com">test item</a>
     </li>
   </ul>
  </body>

</html>

Upvotes: 0

Views: 1042

Answers (4)

dippas
dippas

Reputation: 60553

Set display:block in a because a is an inline level element so make it block level

Also don't need display:inline-block in li because you have display:flex in ul

You can also remove default padding from ul

a {
  padding: 1em;
  background-color: red;
  display: block
}

ul {
  list-style: none;
  padding:0;
  background-color: yellow;
  display: flex;
}
<ul>
  <li>
    <a href="http://google.si">google</a>
  </li>
  <li>
    <a href="http://sometest.com">test item</a>
  </li>
</ul>

Upvotes: 1

LKG
LKG

Reputation: 4192

Just add display:block in anchor tag

      ul {
        list-style: none;
        background-color: yellow;
        display: flex; 
        margin:0px;
        padding:0px;
      }
      
     ul li {
        background-color: green;
        display: inline-block;
      }
      ul li a {
                padding: 1em;
        background-color: red;
        display:block;
      }
<ul>
     <li>
       <a href="http://google.si">google</a>
     </li>
     <li>
       <a href="http://sometest.com">test item</a>
     </li>
   </ul>

Upvotes: 1

Super User
Super User

Reputation: 9642

By default a is inline element, so it don't include padding in height, just update it to block label element. then ul and li will expend. for updating it to block label you can add display:block or display: inline-block or float: left.

Upvotes: 1

C3roe
C3roe

Reputation: 96240

Can someone please explain to me, why li and ul does not expand

Because your links are still inline, and therefor their padding flows out of the line box.

Add display: block for the links.

Upvotes: 4

Related Questions