对齐所有导航菜单项的文本

我在我的网站有一个菜单，它不是对齐的。对齐所有导航菜单项的文本

图片

我如何去与右侧的蓝色按钮的文本对齐导航菜单的所有文字？我尝试了下面的代码，这似乎并不正确。

HTML

<nav class="navbar bg-color3"> 
    <div class="container-fluid"> 
    <a href="#"><img src="/Content/images/uploads/photo-01.png" width="410" alt="PG Portal de Gastos" style="float: left; margin: 18px 10px 10px 0;"></a> 
    <button class="round-toggle navbar-toggle menu-collapse-btn collapsed" data-toggle="collapse" data-target=".navMenuCollapse"> 
     <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
    </button> 
    <div class="collapse navbar-collapse navMenuCollapse"> 
     <div class="login-panel"> 
     <ul id="nav-list" class="nav pull-right"> 
      <li><a href="#intro-center-image" class="btn btn-default goto" style="border: 1px solid transparent;">Inicio</a></li> 
      <li><a href="#benefits-grid-num-2" class="btn btn-default goto" style="border: 1px solid transparent;">Beneficios</a></li> 
      <li> <a href="#benefits-grid-images" class="btn btn-default goto" style="border: 1px solid transparent;">Funcionalides</a></li> 
      <li><a href="#price-3col" class="btn btn-default goto" style="border: 1px solid transparent;">Planes</a></li> 
      <li><a href="#contact-full" class="btn btn-default goto" style="border: 1px solid transparent;">Contacto</a></li> 

           <li class="sub-menu-parent"> 
            <a class="btn " href="#">Iniciar Sesión <i class="icon right-icon icon-login"></i></a> 
            <ul class="sub-menu"> 
             <li> 
               <a class="btn btn-primary" style="border: 1px solid transparent;" href="@Url.Action("Login", "Cuenta")"> 
                Portal 
               </a> 
             </li> 
             <li> 
              <a class="btn btn-primary" style="border: 1px solid transparent;" href="http://web.com/"> 
               Portal 
              </a> 
             </li> 
            </ul> 
           </li> 
           <a class="btn btn-primary" href="@Url.Action("Registrar", "Cuenta")"> 
            Iniciar Prueba<i class="icon right-icon icon-download"></i> 
           </a> 
          </ul> 

    </div> 

        </div> 
       </div> 
      </nav>

来源

2017-07-28 Ledwing

您必须删除padding上.navbar .nav li：

.navbar .nav li { 
    padding:0; 
    float:left; 
}

目前有一个padding:5px这会导致和身边的差距按钮。

来源

2017-07-28 21:50:57

的问题是在.navbar的.login面板.btn类的填充。如果您删除填充（填充：0 20px;）文本是水平排列的。如果你想在菜单的其余部分填充每个类的特定填充。

来源

2017-07-28 21:50:11 lleto

使用padding，而不是height两个（调整填充底和padding-顶部高度问题）尝试在蓝色和白色的空间

来源

2017-07-28 22:00:43

对齐所有导航菜单项的文本

回答

相关问题