如何排列菜单按钮HTML

<ul class="menu">
  <li><a href="#">按钮1</a></li>
  <li><a href="#">按钮2</a></li>
  <li><a href="#">按钮3</a></li>
  <li><a href="#">按钮4</a></li>
</ul>

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
}

.menu li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  background-color: #f2f2f2;
  color: #333;
}

.menu li a:hover {
  background-color: #ccc;
}