html - 如何仅使用 html 和 css 将两个按钮放在同一行中？

Question

如何仅使用 css 和 html 正确地并排对齐两个按钮并在它们之间留出一些空间？

这是我的 html和 css .这两个按钮没有正确对齐。

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background-color: #0c0129;
  background-image: url(coding.jpg);
  background-position: center;
  background-size: cover;
  background-blend-mode: soft-light;
}

.heading {
  width: 600px;
  height: 300px;
  margin: auto;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  outline: none;
}

.title1 {
  display: block;
  text-align: center;
  color: white;
  font-size: 50pt;
  font-family: fantasy;
}

.title2 {
  display: block;
  margin-top: 16px;
  text-align: center;
  color: white;
  font-size: 15pt;
  font-family: sans-serif;
}

.register {
  margin: 50px auto;
  display: block;
  width: 180px;
  height: 50px;
  border: 3px solid white;
  background-color: rgba(255, 255, 255, 0);
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 5px;
  float: left;
  transition: background-color 1000ms, color 1000ms;
}

.register:hover {
  background-color: rgba(255, 255, 255, 1);
  color: #222;
  cursor: pointer;
  transition: background-color 1000ms, color 1000ms;
}

.login {
  margin: 20px auto;
  display: block;
  width: 180px;
  height: 50px;
  border: 3px solid white;
  background-color: rgba(255, 255, 255, 0);
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 5px;
  float: right;
  transition: background-color 1000ms, color 1000ms;
}

.login:hover {
  background-color: rgba(255, 255, 255, 1);
  color: #222;
  cursor: pointer;
  transition: background-color 1000ms, color 1000ms;
}

ul {
  list-style: none;
}

<div class="heading">
  <span class="title1">Banerjee Solutions</span>
  <span class="title2">Your one stop shop for everything tech.</span>
  <ul>
    <li><button class="register">REGISTER NOW</button></li>
    <li><button class="login">LOG IN</button></li>
  </ul>
</div>

我需要修改什么才能获得我想要的结果？

Answer 1

这是我使用 flex

的解决方案

ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

li {
    margin: auto;
}