Search code examples
htmlcssmarginfooterlistitem

HTML footer "margin: auto" issue

I have some issues with the footer of my webpage. The margin: auto; command does not work for my list items here.

I want that the items in the footer take 1/3 of the width in the footer, but no matter where I put the margin: auto command in the links will be next to each other all the time.

Here is my HTML:

<footer>
  <ul>
    <li><a href="text1.html">text1</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text3.html">text3</a></li>
  </ul>
</footer>

and here my css:

footer{
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: darkcyan;
}

footer ul{
  margin: 0;
  list-style: none; 
  text-align: center;
}

footer ul li{
  display: inline; 
}

footer ul li a{
  text-decoration: none; 
  color: black; 
  margin: auto;
}

Thanks for your help!

Solution

  • Use flex box. The solution is here:

    footer{
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: darkcyan;
}

footer ul{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none; 
  text-align: center;
}

footer ul li{
  margin: auto;
}

footer ul li a{
  text-decoration: none; 
  color: black;
}
    <footer>
  <ul>
    <li><a href="text1.html">text1</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text3.html">text3</a></li>
  </ul>
</footer>