CSS浮动正确而不改变顺序？

Question

已经有一些类似的问题了，但这些修复对我来说都不起作用。我想将<li>菜单浮动到右侧，但我无法让它正确执行此操作。

超文本标记语言

 <div id="topnav"><ul class="topnavlinks"><li class="menu-474 first"><a href="/" title="Home page">Home</a></li>
 <li class="menu-540 active-trail active"><a href="/our-company" title="" class="active">Our company</a></li>
 <li class="menu-541"><a href="/news_blog" title="">Blog</a></li>
 <li class="menu-930"><a href="/faq" title="Frequently Asked Questions">FAQ</a></li>
 <li class="menu-900 last"><a href="/contact" title="Contact">Contact</a></li>
 </ul></div>

CSS

#topnav { width:100%; height:14px; background:#b8b8b8; border-bottom:1px solid #989898; }
.topnavlinks { width:980px; margin:0px auto; }
.topnavlinks ul { float:right;  }
.topnavlinks li { float:left;  }
.topnavlinks a { color:#fff; text-decoration:none; padding:0px 27px; }

目前它根本不向右浮动，并且通过其他一些变体，我已经让它向右浮动，只是顺序相反。

Answer 1

嗨，我找到了另一个解决方案，使用display:flex和justify-content:flex-end

所以在原来的问题中，而不是：

.topnavlinks ul {
  float:right;  
}

将其更改为以下内容：

ul.topnavlinks {   
  display: flex;   
  justify-content: flex-end; 
}

它将使导航向右浮动而不改变顺序