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

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>