CSS浮动正确而不改变顺序? [英] CSS float right without changing order?
本文介绍了CSS浮动正确而不改变顺序?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
已经有一些类似的问题,但这些修复方法都不适合我.我想将 菜单浮动到右侧,但我无法正确执行.
There are some similar questions like this already, but none of those fixes worked for me. I want to float a <li>
menu to the right, but I can't get it to do it correctly.
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; }
目前它根本不会向右浮动,并且通过其他一些变体,我让它向右浮动,只是顺序相反.
Currently it doesn't float to the right at all, and with some other variations I have gotten it to float right, only with reversed order.
推荐答案
尝试添加额外的容器
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; }
这篇关于CSS浮动正确而不改变顺序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文