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

如何将菜单水平对齐？

2 个答案: