Question

.topNav {
  overflow: hidden;
  background-color: #5e9da1;
}


/* Style the links inside the navigation bar */

.topNav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

.topNav a:hover {
  background-color: #ddd;
  color: #000000;
}


/* Add a color to the active/current link */

.topNav a.active {
  background-color: #4CAF50;
  color: #ffffff;
}

<div class="topNav">
  <a class="active" href="#home">Home</a>
  <a href="#About">About</a>
  <a href="#Gallery">Gallery</a>
  <a href="#Contact">Contact</a>
</div>

如何将锚点浮动到右边而不会颠倒它们之间的顺序？

注意：我能够通过手动反转HTML文件中的锚点顺序来解决此问题，但我不确定这是否是问题的正确解决方案（良好做法）：例如：

  <a href="#Contact">Contact</a>
  <a href="#Gallery">Gallery</a>
  <a href="#About">About</a>
  <a class="active" href="#Home">Home</a>

Answer 1

一般情况下，我建议不要因为这个原因和其他原因使用花车。我使用了内联块，并将内容与右侧对齐

.topNav {
  overflow: hidden;
  background-color: #5e9da1;
  text-align: right;
}


.topNav a {  
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

}

这是Codepen中的一个修复程序 - https://codepen.io/anon/pen/MEvYYq

浮动导航锚点而不撤消他们的订单？

1 个答案: