导板上导航栏上的margin-right属性不起作用

Question

我有以下导航栏：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navigationlinks" id="bs-example-navbar-collapse-1" style="">
                    <ul class="nav navbar-nav main-navi uppercase">

                        <li><a href="#about">About</a></li>
                        <li><a href="#values">Values</a></li>
                        <li><a href="#team">Team</a></li>
                        <li><a href="#portofolio">Portofolio</a></li>
                        <li><a href="#join">Join</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

我想将链接移动到右边的一些像素，所以我尝试了margin-right：100px;但它不起作用，不知道为什么？

.navigationlinks{
    margin-top: 10px;
    margin-right:100px;
    background:black; 
    opacity:0.6; 
    border-style:none;  
}

Margin-top工作正常。

Answer 1

默认情况下， ul有一个padding-left: 40px，

只需给出样式，

ul { padding-left: 0; }

作为建议的一部分，只需在开始开发之前添加一个CSS重置。可以在这里找到，

http://meyerweb.com/eric/tools/css/reset/

问候。

Answer 2

您可以根据需要调整填充：

li a{
  padding-left :5px !important;
  padding-right :5px !important;
}

Answer 3

您希望获得 Demo 等内容吗？

CSS

.navbar-nav>li {
    margin-left:50px; /* use margin or padding values to make it move right/left accordingly */
    /*padding-left:50px;*/
}