Désalignement du menu de navigation

Je crée un menu de navigation à l'aide du bootstrap. Ce menu de navigation est conçu pour mon application MVC 5. Le menu Admin doit être fixé en termes d'alignement. Si vous notez le menu Admin et que son image de gyphon n'est pas alignée comme les autres éléments de menu. J'avais changé l'élément de menu pour utiliser le lien html.action car c'est la manière recommandée d'implémenter les liens de navigation dans MVC.Désalignement du menu de navigation

Navigation Menu

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; 
}

Les éléments qui se rendus à la page charge

Source

2017-03-08 Tom

peut être vous pouvez prendre l'aide d'ici http: //stackoverflow.com/questions/1547097/asp-net-mvc-how-to-include-span-in-link-from-html-actionlink –

Cet exemple montre l'utilisation d'url.action et ce dont j'ai besoin est html.action car je veux générer la balise d'action – Tom

Je pense que l'alignement que vous voulez n'est pas possible avec html.action donc utilisez url.action à la place –

S'il vous plaît remplacer le code

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

avec

<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>

Source

2017-03-08 12:40:25

Ce n'est pas correct comme @ Html.ActionLink génère une balise d'ancrage. Avec votre code, deux balises d'ancrage sont générées – Tom

Je ne vois qu'une seule balise d'ancrage dans les outils de développement –

Hi Shiva c'est avec mon code. Avec votre code, il montre deux – Tom

Désalignement du menu de navigation

Répondre

Questions connexes