在右上角制作导航栏

Question

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

     <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（红色框）来实现我使用网格 bootstrap 但不知道为什么 ul（红色边框）在右边有 space 尽管我设置了宽度 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

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

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

这里是Fiddle

Answer 2

请参阅此处，其中包含 bootstrap

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

在右上角制作导航栏

Make navigation bar on the top right

html

css

navigation

margin

padding