Html 如何在不移动选项图标的情况下使收件箱向右浮动

我知道标题不是很好，但在我的topnav中，我有一个收件箱和一个带有3个垂直点的选项，但当我将它们都向右浮动（

float:right；

）时，收件箱位于我不想要的末尾，我希望收件箱位于选项的左侧。这是密码

  .notification {
  background-color: #555;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification:hover {
  background: red;
}

.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}



<div id="topnav">
    <a class="active" href="home">Home</a>
    <a id="font2" href="contact.php">Contact Us</a>
    <a href="#" class="notification">
  <span>Inbox</span>
  <span class="badge">1</span>
</a>
    <button id="options" style="float:right;"><svg xmlns="http://www.w3.org/2000/svg" width="27" height="25" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
  <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg></button>
  </div>

。通知{
背景色：#555；
颜色：白色；
文字装饰：无；
填充：15px 26px；
位置：相对位置；
显示：内联块；
边界半径：2px；
}
。通知：悬停{
背景：红色；
}
.通知.徽章{
位置：绝对位置；
顶部：-10px；
右：-10px；
填充物：5px10px；
边界半径：50%；
背景色：红色；
颜色：白色；
}

浮动排序之所以发生，仅仅是因为您的收件箱出现在代码的第一位。你让它向右浮动，它就这样做了。然后你告诉你的按钮向右浮动，然后它向右浮动，但是你的收件箱已经在最右边了，所以它出现在它的左边

最简单的解决方案可能是重新排列收件箱和按钮在HTML代码中的显示顺序。所以，先按下按钮，然后它会先向右浮动。 下面的代码段使用float方法对HTML元素重新排序：

。通知{
浮动：对；
背景色：#555；
颜色：白色；
文字装饰：无；
填充：15px 26px；
位置：相对位置；
显示：内联块；
边界半径：2px；
}
。通知：悬停{
背景：红色；
}
.通知.徽章{
位置：绝对位置；
顶部：-10px；
右：-10px；
填充物：5px10px；
边界半径：50%；
背景色：红色；
颜色：白色；
}
#选择权{
浮动：对；
}

---

浮动排序之所以发生，仅仅是因为您的收件箱出现在代码的第一位。你让它向右浮动，它就这样做了。然后你告诉你的按钮向右浮动，然后它向右浮动，但是你的收件箱已经在最右边了，所以它出现在它的左边

最简单的解决方案可能是重新排列收件箱和按钮在HTML代码中的显示顺序。所以，先按下按钮，然后它会先向右浮动。 下面的代码段使用float方法对HTML元素重新排序：

。通知{
浮动：对；
背景色：#555；
颜色：白色；
文字装饰：无；
填充：15px 26px；
位置：相对位置；
显示：内联块；
边界半径：2px；
}
。通知：悬停{
背景：红色；
}
.通知.徽章{
位置：绝对位置；
顶部：-10px；
右：-10px；
填充物：5px10px；
边界半径：50%；
背景色：红色；
颜色：白色；
}
#选择权{
浮动：对；
}

哦，谢谢兄弟，这就是为什么笑。哦，谢谢兄弟，这就是为什么笑。