2 Stimmen

Konvertieren der Navigation in die Vertikale

Ich teste gerade ein ASP.MVC 2 Projekt. Bitte sehen Sie das Bild. image

Das entsprechende CSS:

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;

    margin: 0;
    text-align: right;
}

ul#menu li
{

   list-style: none;

 }

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

Ich möchte es von horizontal zu vertikal konvertieren, was ich versucht habe war, jeden Block zu entfernen und zu testen, aber kein Glück.

Die html:

<body>
<div class="page">

    <div id="header">

        <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 id="title">
            <h1>WSTEST</h1>
        </div>
        </div>
    </div>

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

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

Danke.

2voto

Luis Punkte 5624

Versuchen Sie dies:

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

Ursprünglich ist display: inline ändern Sie es in display: block; und es sollte funktionieren

Hoffentlich hilft das!

1voto

Billy Moat Punkte 20596

Versuchen Sie, das Text-align:right zu entfernen;

Ich bin überrascht, dass in Ihrem Code nichts steht, was den LI-Elementen sagt, dass sie schwebend sind, da dies die normale Art ist, ein horizontales Menü zu erstellen.

Ich habe den Verdacht, dass den LI-Elementen irgendwo anders ein float:left hinzugefügt wurde.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X