如何将一组列表元素居中并将它们并排放置？

Question

这是我的代码，我正在制作一个注册页面

<div class="form">
  <ul class="tab-group">
    <li class="tabsignup"><a href="/signup.html">Sign Up</a></li>
    <li class="tablogin"><a href="/login.html">Log In</a></li>
  </ul>
</div>

在此代码中，我希望列表居中但彼此相邻，请帮助我！

Answer 1

ul{
display:flex;
list-style-type:none;
justify-content:center;
align-items:center;
border:solid 1px blue;
height:50vh;
}

li{
margin:0 4vw;
}

<div class="form">
  <ul class="tab-group">
    <li class="tabsignup"><a href="/signup.html">Sign Up</a></li>
    <li class="tablogin"><a href="/login.html">Log In</a></li>
  </ul>
</div>