如何水平对齐菜单？

Question

我正在尝试对齐我的文本（水平），但我的努力没有奏效

.menu{
    background: hsla(290,60%,70%,0.3);
    list-style: none;
}
.menu li{
        width: 200px;
}
.menu li a{
    padding: 8px 16px;
    float:center;
    display: inline;
    text-align: right;
    text-decoration: none;
}
.menu li a:hover{

    background-color: hsla(200,100%,40%,0.2);
}

Answer 1

试试这个：

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.menu {
  display: flex;
  justify-content: center;
  background: hsla(290,60%,70%,0.3);
  padding: 8px 16px;
}
.menu li{
  flex: 1;
  text-align: center;
}
.menu li a:hover{
  background-color: hsla(200,100%,40%,0.2);
}

<ul class="menu">
  <li><a href="/">thing</a></li>
  <li><a href="/">stuff</a></li>
  <li><a href="/">things</a></li>
  <li><a href="/">stuffs</a></li>
  <li><a href="/">thingsstuff</a></li>
</ul>

Answer 2

查看此演示。你已经使用float:center; 使用float:left 反对它。应该可以的。

Demo