ASP.NET MVC骨架項目，菜單w.r.t.上的CSS問題text-align

我創建了一個新的MVC項目，並且有一個默認的Site.css文件。默認樣式在頂部創建一個菜單，並與右側對齊。ASP.NET MVC骨架項目，菜單w.r.t.上的CSS問題text-align

我看看樣式表，我在ul＃菜單上看到，text-align設置爲正確。所以我想把它設置在左邊會使它一直走到左邊。

但它沒有。它最終坐在中間的某個地方。我錯過了什麼？

相關的HTML是：

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

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

來源

2010-02-12 Jiho Han

的text-align證明塊元素中的文本。你需要浮動元素。

首先，通過了UL＃菜單選擇改變這個浮動菜單：

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

而不是添加此選擇清除浮動：

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

來源

2010-02-12 20:30:50

感謝您的答覆。「標題」的風格已經左移，但之後沒有明確。當然你不會知道，因爲那不在代碼示例中。但你確實添加了清晰的內容：在ul＃菜單中也是如此！ – 2010-02-12 20:37:46

雖然我不想將菜單浮起來，但這使得我的主要坐在它旁邊，而不是在它下面。我想我可以爲main添加另一個清除 – 2010-02-12 20:39:24

我不知道你添加了哪些其他的css，但是我給你的解決方案工作。我自己嘗試了一個新的MVC網站。菜單移到左側，所有其他元素都保留在原來的位置。 – 2010-02-12 20:45:46

ASP.NET MVC骨架項目，菜單w.r.t.上的CSS問題text-align

回答

相關問題