html - CSSは順序を変更せずに正しくフロートしますか？

Question

すでにこのようないくつかの同様の質問がありますが、それらの修正はどれも私にはうまくいきませんでした。メニューを右にフロートさせたいのですが<li>、正しく表示できません。

HTML

 <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; 
}

順序を変更せずにナビゲーションを正しくフロートさせます

Answer 2

コンテナを追加してみてください

HTML

<div id="topnav"><div class="cont"><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></div>

CSS

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

Answer 3

27pxの水平方向のパディングがあることを忘れないでください。これにより、メニューが右側に配置されます。

 #topnav { width:100%; height:14px; border-bottom:1px solid #989898; text-align:right; }

.topnavlinks { margin:0px auto; display:inline; float:right;}

.topnavlinks ul { float:right; text-align:left; }

.topnavlinks li { display:inline; text-align: left;}

.topnavlinks a { color:#fff; text-decoration:none; padding:0px 27px;}

Answer 4

http://jsfiddle.net/gVnrM/ デモ

これです