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（红色框）我使用网格引导但不知道为什么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已经尽可能正确对齐（它没有边距也没有填充）。

如果你喜欢 here

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

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

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

Answer 2

你可以添加navbar ul text-align：right;

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

这是 Fiddle

在右上方创建导航栏

2 个答案: