当我运行网站本地时,元素已正确对齐。这是预期的结果:
http://i57.tinypic.com/555y8k.png
但是,在我的Webpage上,元素与左侧对齐。
我尝试了this但它仍然是相同的。我不明白的是为什么它在我的本地机器而不在服务器上工作?我该如何解决?
相关的HTML代码:
<section id="header" class="appear">
<div class="navbar navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,0,0,0.3);" data-300="line-height:60px; height:60px; background-color:rgba(0,0,0,1);">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-bars color-white"></span>
</button>
<h1><a class="navbar-brand" href="index.html" data-0="line-height:90px;" data-300="line-height:50px;" style="font-family: 'Cuprum', sans-serif;"> Kaushaya </a>
</h1>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav right-to-left" data-0="margin-top:20px;" data-300="margin-top:5px;">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#section-about" >About</a></li>
<li><a href="#testimonials">Work</a></li>
<li><a href="#section-skills">Skills</a></li>
<li><a href="#section-contact">Contact</a></li>
<li><a target="_blank" href="http://www.webparadiso.wordpress.com">Blog</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
</section>
答案 0 :(得分:2)
尝试在float: right;
和.nav
上使用.navbar
。
要进行垂直额外调整,您可以clear: both;
使用.nav
。如果它仍然无效,请在float语句的末尾添加!important
。一个简单的CSS解决方案,适合您的问题!
希望这有帮助!
答案 1 :(得分:0)
您可以使用twitter bootstraps导航类将其拉到右侧。
<ul class="nav navbar-nav navbar-right">
上看到该示例