为什么我的导航列表会反转？

Question

所以我几次遇到这个问题，我的导航菜单怎么反转？

＆＃13;

＆＃13;

.navigation li a {
  display: inline-block;
  text-decoration: none;
  float: right;
  margin-right: 10px;
}
ul {
  list-style-type: none;
}

＆＃13;

<div class="container-fluid">
  <nav class="navigation">
    <ul>
    <li><a href="">About</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Contact</a></li>
    </ul>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

投入使用后，菜单顺序相反，为什么会发生这种情况？

Answer 1

你让元素浮动到右边。试着想象......

第一个元素进入文档并一直向右浮动，撞到屏幕的一侧。第二个进入并向右浮动，但碰到第一个的左侧，并停留在那里。等等，等等。

更好的解决方案是将display: inline-block用于元素，将float-right用于父级（ul）。

但就我个人而言，我根本不喜欢漂浮，所以我会在text-align上使用ul。 text-align使其保持正常的文本行，也可以包含图像或其他内联和内联块元素。通过右对齐文本，单词的顺序不会改变，但任何剩余的空白区域只是添加到左侧而不是右侧：

＆＃13;

＆＃13;

.navigation li a {
  display: inline-block;
  text-decoration: none;
  float: right;
  margin-right: 10px;
}
.navigation li {
  display: inline-block;
}
.navigation ul {
  text-align: right;
}

＆＃13;

<div class="container-fluid">
  <nav class="navigation">
    <ul>
      <li><a href="">About</a>
      </li>
      <li><a href="">Portfolio</a>
      </li>
      <li><a href="">Contact</a>
      </li>
    </ul>

  </nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这种情况正在发生，因为是float的设计方式。它会＆＃34;浮动＆＃34;指定的顺序中指定方向中的元素。如果订单很重要，您可以通过三种方式解决此问题：

1. 使用built-in Bootstrap alignment tools。
2. 将float: right应用于父<ul>，而不是每个链接。
3. 颠倒元素的顺序。

在这种情况下，您按照About > Portfolio > Contact的顺序将元素浮动到右侧。这就是：

1. About向右浮动，没有先前的元素，因此它位于父容器的最右侧墙<ul>。
2. Portfolio向右浮动，但About已经存在，所以它尽可能地正确，这将它放到前一个元素的左。
3. Contact是最后一个派对，所以它最后会在最左边的一行结束。