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;
}

导航显示错误的顺序

1 个答案: