ASP.NET MVC projet squelette, question CSS sur le menu w.r.t. text-align

Je crée un nouveau projet MVC et un fichier Site.css par défaut. Le style par défaut crée un menu en haut, aligné sur la droite.ASP.NET MVC projet squelette, question CSS sur le menu w.r.t. text-align

Je regarde la feuille de style, et je vois sur ul # menu, l'alignement de texte est réglé à droite. Donc, je pense que le mettre à gauche le fera aller à gauche.

Mais ce n'est pas le cas. Il finit par s'asseoir quelque part au milieu. Qu'est-ce qui me manque?

Le html est pertinent:

<body> 
    <div class="page"> 

     <div id="header"> 
      <div id="title"> 
       <h1>My MVC Application</h1> 
      </div> 

      <div id="logindisplay"> 
       <% Html.RenderPartial("LogOnUserControl"); %> 
      </div> 

      <div id="menucontainer"> 

       <ul id="menu">    
        <li><%= Html.ActionLink("Home", "Index", "Home")%></li> 
        <li><%= Html.ActionLink("About", "About", "Home")%></li> 
       </ul> 

      </div> 
     </div> 

     <div id="main"> 
      <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 

      <div id="footer"> 
      </div> 
     </div> 
    </div> 
</body>

Et le CSS:

ul#menu 
{ 
    border-bottom: 1px #5C87B2 solid; 
    padding: 0 0 2px; 
    position: relative; 
    margin: 0; 
    text-align: right; 
} 

ul#menu li 
{ 
    display: inline; 
    list-style: none; 
} 

ul#menu li#greeting 
{ 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    color: #fff; 
} 

ul#menu li a 
{ 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    background-color: #e8eef4; 
    color: #034af3; 
} 

ul#menu li a:hover 
{ 
    background-color: #fff; 
    text-decoration: none; 
} 

ul#menu li a:active 
{ 
    background-color: #a6e2a6; 
    text-decoration: none; 
} 

ul#menu li.selected a 
{ 
    background-color: #fff; 
    color: #000; 
}

Source

2010-02-12 Jiho Han

text-align justifie le texte dans un élément de bloc. Vous devez faire flotter les éléments.

Tout d'abord, flotter le menu en changeant le sélecteur de menu ul # pour ceci:

ul#menu 
{ 
    border-bottom: 1px #5C87B2 solid; 
    clear: both; 
    float: left; 
    padding: 0 0 2px; 
    position: relative; 
    margin: 0; 
    text-align: right; 
}

Et que d'ajouter ce sélecteur pour effacer le flotteur:

#menucontainer:after 
{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

Source

2010-02-12 20:30:50

Merci pour la réponse. Le style pour "title" a été flotté à gauche mais il n'y avait pas clair après. Bien sûr, vous ne l'auriez pas su puisque ce n'était pas dans l'échantillon de code. Mais vous avez ajouté clairement: les deux dans ul # menu qui fonctionne aussi! –

Je ne veux pas faire flotter le menu à gauche, ce qui rend mon principal assis à côté de lui plutôt que de le descendre. Je suppose que je pourrais ajouter un autre clair pour le principal aussi bien –

Je ne sais pas quel autre css vous avez ajouté, mais la solution que je vous ai donnée fonctionne. Je l'ai essayé avec un nouveau site MVC moi-même. Le menu est déplacé vers la gauche et tous les autres éléments sont restés où ils étaient. –

ASP.NET MVC projet squelette, question CSS sur le menu w.r.t. text-align

Répondre

Questions connexes