I got some flexbox , ul and li issues-CodePudding

I have a flexbox navbar using ul with a height of 86px. I centered the li-s using align-items: center, but when I want to add a background-color hover effect on the list items, having the same the height as the ul, the list items just jump to the top of the ul and it's no more centered...Why's that? I applied display flex on the li-s using align-items center and this way was okay, but I know this isn't the right way to do it, because you need to apply flex on parent elements...

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  max-width: 1280px;
  margin: 0 auto;
  list-style-type: none;
  height: 86px;
  background-color: beige;
  display: flex;
  font-size: 20px;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

ul li {
  height: 86px;
}

<body>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Products</li>
    <li>FAQ</li>
  </ul>
</body>

CodePudding user response：

If I'm understanding the question correctly, I think you need to remove the height set for both the ul and li elements and add appropriate padding to the ul element, so this would be the entire css:

* {
    margin: 0;
    box-sizing: border-box;
}

ul {
    max-width: 1280px;
    margin: auto;
    list-style-type: none;
    background-color: beige;
    display: flex;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 43px 0;
}

I ran this locally and got a vertically and horizontally centered chunk of li items.

CodePudding user response：

You Set height:86px to your li elements and that is causing the problem

you can increase their height using padding-top and padding-bottom or not to add any height to li elements and just let the align-items to work

li heights is a must you can set line-height to them as well

li{
    height:86px;
    line-height: 86px;
}

here in this fiddle I've just removed li heights and it's working

CodePudding user response：

When aligning li flex items on the y-axis I would use display: flex; on both the ul and li. Then just simply add height: 100%; to your li's for the background-color to cover the full height and you are good to go.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  max-width: 1280px;
  margin: 0 auto;
  list-style-type: none;
  height: 86px;
  background-color: beige;
}

ul,
li {
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

li {
  height: 100%;
}

li:hover {
  background-color: pink;
}

li:nth-child(2):hover {
  background-color: lightgreen;
}

<body>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Products</li>
    <li>FAQ</li>
  </ul>
</body>

CodePudding user response：

Just remove height from both the element if you want li to take full width of the navbar and adjust its width as per the padding. This is the normal and I guess a good approach to do this. Your code was just adding height hence text inside it went up. Remove it and add some padding to li

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  max-width: 1280px;
  margin: 0 auto;
  list-style-type: none;
  background-color: beige;
  display: flex;
  font-size: 20px;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

ul li {
  padding: 20px 20px;
}

ul li:hover {
  background: tomato;
}

<body>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Products</li>
    <li>FAQ</li>
  </ul>
</body>