在右上角制作导航栏答案

【问题标题】：Make navigation bar on the top right在右上角制作导航栏
【发布时间】：2016-11-14 11:13:30
【问题描述】：

我要创建包含徽标（左）和列表（右）的导航栏这是我的代码

     <nav>
        <div class="row">
            <div class="col-md-3">
                <a href="#" class="logo">SPIRIT8</a>
            </div>
            <div class="col-md-9">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">TEAM</a></li>
                    <li><a href="#">SERVICES</a></li>
                    <li><a href="#">PORTFOLIO</a></li>
                    <li><a href="#">TESTIMONIALS</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </div>
            </div>
       </nav>

我希望 li 标签一直向右移动。我无法通过 margin-right:0 li （黄色框）或 padding-right:0 ul （红色框）我使用网格引导，但不知道为什么 ul（红色边框）在右侧有空间，尽管我将宽度设置为 100%。

这是我想要的结果：http://themeforces.com/demo/freebies/tf-free-no.3/

我的CSS：

 nav {
   height: 70px;
   line-height: 70px;
   border: 1px  solid green;
 }

 nav ul {
    list-style: none;
    width: 100%;
    border: 1px solid red;
 }

nav ul li {
  display: inline-block;
  font-size: 60%;
  margin-right: 0;
  border : 1px solid yellow;
 }

【问题讨论】：

你分享的例子，他们正在使用引导导航栏..你也可以使用..

标签： html css navigation margin padding

【解决方案1】：

您可以添加导航栏 ul text-align:right;

 nav ul {
    list-style: none;
    width: 100%;
    border: 1px solid red;
    text-align: right;
 }

这里是Fiddle

【讨论】：

它有效，ty 非常好，idk 为什么没想到，谁能告诉我为什么 ul : padding-right:0;或 li : margin-right:0 不起作用？我只是想了解基本的
你也可以使用引导导航栏...jsfiddle.net/swaranan/zw9420dc
刚看到，看起来好用但是不知道怎么装，谢谢推荐

【解决方案2】：

请参见此处包含引导程序

jsfiddle

代码：

 nav ul {
     list-style: none;
     width: 100%;
     border: 1px solid red;
     text-align: right;
  }

padding-right:0 和 margin-right:0 对您的问题没有影响，因为 ul 已经尽可能对齐（它没有边距和填充）。

如果你有类似here

.nav ul {
padding-right:20px;
margin-right:100px;
text-align:right;
}

那么是的。添加margin-right:0 和padding-right:0 会有所帮助。但在你的情况下......边距和填充已经在0

另外...您不使用边距或填充来左对齐或右对齐。你要么使用floats 要么使用text-align

【讨论】：