Question

我想将边框调整为一半，以便与学生链接对齐。我该如何调整大小？我试图调整大小，但只是厚度移动而不是长度。你可以看到上面的图片。

这是我的HTML代码。

    <nav class="navbar navbar-default navbar-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
            <span class="icon-bar" ></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>  
        </button>
        <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/img/brandz.png" >
    </div>

<div class="collapse navbar-collapse" id="nav-collapse">

    <ul class="nav navbar-nav navbar-right">
         <li><a href="#">Students</a></li>
        <li><a href="#">Faculty</a></li>
        <li><a href="#">Contact us</a></li>
                <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <!-- Modal -->
                    <div id="myModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                <!-- Modal content-->
                         <div class="modal-content">
                             <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                             </div>
                             <div class="modal-body">
                                <p>Some text in the modal.</p>
                             </div>
                             <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                             </div>
                         </div>
                        </div>
                   </div>
    </ul>
</div>

这是我的css

       .navbar-default .navbar-nav > li > a {
       font-weight: 590;
       color: #949494;
       display: block;
       padding: 5px 35px 2px 45px;
       border-bottom: 3px solid transparent;
       line-height: 97px;
       text-decoration: none;
       transition: border-bottom-color 0.5s ease-in-out;
       -webkit-transition: border-bottom-color 0.5s ease-in-out; 

       }
       .navbar-default{
       background-color:#fff;

       }
       .nav>li>a {
       position: relative;
       }
      .navbar-default .navbar-right > li > a {
       padding-left: 70px;
       padding-right: 1px;
       }
       .navbar-default .navbar-toggle .icon-bar {
       background-color: #000000;
       margin:0 0 4px;
       width: 25px;
       height: 5px;

       }

       .nav.navbar-nav > li{
       display: :inline-block;
       }
       .nav.navbar-nav{
       list-style-type:none;
       }
       .nav.navbar-nav > li > a:hover{
       color:#a92419;
       border-bottom-color: #a92419;
       }

      .navbar-default .navbar-toggle .icon-bar {
      background-color:#a92419 ;
      margin:0 0 4px;
      width: 25px;
      height: 5px;

      }
      .navbar-default .navbar-toggle:focus, .navbar-default .navbar-  toggle:hover        { 
      background: none;
      }
      button.navbar-toggle{
      background:none;
      border:none;
      color:#000;

      }

Answer 1

尝试使用边距而不是填充

你有：

.navbar-default .navbar-right > li > a {
   padding-left: 70px;
   padding-right: 1px;
   }

而不是填充左边是70px试试：

.navbar-default .navbar-right > li > a {
   margin-left: 70px;
   padding-right: 1px;
   }

这应该留下所有空间到左边

Answer 2

我已经解决了这个问题。

.navbar-default .navbar-right > li > a {
  padding: 0 30px;
}

调整边框底部

2 个答案: