導航菜單不對齊

我正在使用引導來創建導航菜單。此導航菜單是爲我的MVC 5應用程序構建的。管理菜單需要根據對齊方式進行修復。如果您注意到管理菜單和其gyphicon圖像未與其他菜單項對齊。我已經將菜單項更改爲使用html.action鏈接，因爲這是在MVC中實現導航鏈接的推薦方式。導航菜單不對齊

導航菜單

的Html

<header> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 

       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a href="#"><img src="~/Images/Computacenter.png" /> </a> 
        <h1>MCR</h1> 
       </div> 

       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

        <ul class="nav navbar-nav navbar-right text-center"> 
         <li><a href="#"><span class="glyphicon glyphicon glyphicon-home" aria-hidden="true"></span><p>Home</p></a></li> 
         <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li> 
         <li><a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li> 
         <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li> 
         <li class="hideli"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span>@Html.ActionLink("Admin", "Team", "Admin", null, null) </li> 
         <li><a href="#"><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

    </header>

CSS

.navbar { 
    padding: 0; 
    background-color: #fff; 
} 

.navbar-header img { 
    max-height: 55px; 
    max-width: 55px; 
    padding-top: 25px; 
    margin-right: 5px; 
    float: left; 
} 

.navbar-header h1 { 
    float: left; 
    color: darkblue; 
} 

.navbar-search select { 
    position: relative; 
    left: 84px; 
} 


.nav navbar-nav navbar-right { 
    text-align: center; 
} 

.nav > li { 
    background-color: white; 
} 

.nav > li a:hover > .glyphicon { 
    color: #009ddc; 
} 


.nav li:hover p { 
    color: #009ddc; 
} 

.hideli { 

    padding-right: 200px; 
}

個

即得到呈現在頁面加載的元素

來源

2017-03-08 Tom

替換代碼

<li class="hideli"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span>@Html.ActionLink("Admin", "Team", "Admin", null, null) </li>

可能是你可以採取一些幫助，從這裏HTTP： //stackoverflow.com/questions/1547097/asp-net-mvc-how-to-include-span-in-link-from-html-actionlink –

該示例顯示了使用url.action和我需要的是html.action，因爲我想要生成操作標記 – Tom

我認爲你想要的對齊方式不可能與html.action所以使用url.action而不是 –

請

<li class="hideli"><a><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>@Html.ActionLink("Admin", "Team", "Admin", null, null) </p></a> </li>

來源

2017-03-08 12:40:25

這不是正確的@ Html.ActionLink生成一個錨標記。使用您的代碼生成兩個定位標記 – Tom

我在開發人員工具中只看到1個定位標記 –

嗨，我的代碼是溼婆。用你的代碼顯示兩個 – Tom

導航菜單不對齊

回答

相關問題