Javascript 为什么导航栏链接的顺序错误？

我已经对导航条进行了编程，但是链接的顺序不对，为什么会这样？我怎样才能修好它？这是在正确的顺序为移动版，它只是桌面版，这是在错误的顺序。以下是我的html代码：

<div class="topnav" id="myTopnav">
    <img src='images/ared logo.jpeg ' width="120" height="40">
    <a href="">Home</a>
    <a href="">About us</a>
    <div class="dropdown">
        <button class="dropbtn">Services
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Sports</a>
          <a href="#">Events</a>
          <a href="#">Social media</a>
        </div>
      </div> 
      <a href="">Medical</a>
      <a href="" >Testmonies</a>
      <a href="" >Case study</a>
      <a href="" >Blog & news</a>
    <a href="" >Contact us</a>
   
   
   

  

  

    <img src='images/login icon.png ' width="30" height="30" style="text-align: right; 
    float:right;padding-top:10px" >

  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776; 
  </a>

---

下面是它的外观图片：

解决方案是浮动整个div元素，而不是解决方案是浮动整个div元素，而不是，如果您使用

display:flex

它将起作用。至少它会解决您提出的问题

    .topnav {
    overflow: hidden;
    background-color: #fffcf6;
      display:flex;
    }

---

如果您使用

display:flex

它将工作。至少它会解决您提出的问题

    .topnav {
    overflow: hidden;
    background-color: #fffcf6;
      display:flex;
    }

---

---

您试图解决什么问题？您卡在哪里？您使用的是引导库？.topnav a{float:right；}由于这个css，您使用它来正确地浮动元素。我希望它们位于右侧，但由于某些原因，它们的顺序相反。您尝试了什么来检查为什么会发生这种情况？您尝试了什么来解决问题？你在哪里卡住了？你在使用引导库？.topnav a{float:right；}因为这个css，你用它来浮动元素。我希望它们在右边，但由于某些原因，它们的顺序是相反的。你试过检查为什么会发生这种情况吗？你在代码中没有使用flex，但它会产生结果。你还没有指定执行此操作的方法是的，它可以工作，但我希望链接位于右侧我不明白你的问题，你是说

a

，

img

标记吗？是的，我希望a标记和img位于右侧，徽标位于左侧你是说这个吗？？[结果图像]（）代码中没有使用flex，但它会产生结果。你还没有指定执行此操作的方法是的，它可以工作，但我希望链接位于右侧我不明白你的问题，你是说

a

，

img

标记吗？是的，我希望a标记和img位于右侧，徽标位于左侧你是说这个吗？？[结果图像]（）

<div class="topnav">
  <img ...>
<div class="topnav-right>
   <a href=...>
</div>
</div>

    .topnav {
    overflow: hidden;
    background-color: #fffcf6;
      display:flex;
    }