html - 在右上角制作导航栏

Question

我想创建包含 Logo (左)和列表(右)的导航栏这是我的代码

     <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(红色框)来实现我使用 grid bootstrap，但不知道为什么 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;
 }  

Answer 1

看到这里包含 Bootstrap

jsfiddle

代码:

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

padding-right:0 和 margin-right:0 对您的问题没有影响，因为 ul 已经尽可能正确对齐(它没有 margin 和无填充)。

如果你有类似 here 的东西

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

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

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