导航显示顺序错误

Question

我的导航是这样显示的：

#header-menu #navigation {
  text-align: right;
}
#header-menu #navigation ul {
  display: inline-block;
}
#header-menu #navigation ul li {
  float: right;
  margin: 10px;
  display: flex;
  align-items: center;
  height: 80px;
}
#header-menu #navigation ul li a {
  text-decoration: none;
  color: white;
  font-weight: 800;
  font-size: 14pt;
}

<div id="navigation" class="col-xs-9">
  <ul>
    <li><a href=""><span>Home</span></a>
    </li>
    <li><a href=""><span>about</span></a>
    </li>
    <li><a href=""><span>products</span></a>
    </li>
    <li><a href=""><span>blog</span></a>
    </li>
    <li><a href=""><span>contacts</span></a>
    </li>
  </ul>
</div>

但由于某些原因，当它显示为从底部到时间排序时：

联系人博客产品关于主页...

我怎样才能使它从上到下的顺序正确。

干杯

Answer 1

您在 li 元素上设置了一个浮点数，这意味着无论第一个元素是什么，都将始终是右边的第一个元素。

尝试将您的 CSS 更改为：

#header-menu #navigation {
  text-align: right;
}
#header-menu #navigation ul {
  display: inline-block;
  float: right;
}
#header-menu #navigation ul li {
  margin: 10px;
  display: flex;
  align-items: center;
  height: 80px;
}
#header-menu #navigation ul li a {
  text-decoration: none;
  color: white;
  font-weight: 800;
  font-size: 14pt;
}