對齊所有導航菜單項的文本

我在我的網站有一個菜單，它不是對齊的。對齊所有導航菜單項的文本

圖片

我如何去與右側的藍色按鈕的文本對齊導航菜單的所有文字？我嘗試了下面的代碼，這似乎並不正確。

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

對齊所有導航菜單項的文本

回答

相關問題