1
我創建了一個新的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;
}
感謝您的答覆。 「標題」的風格已經左移,但之後沒有明確。當然你不會知道,因爲那不在代碼示例中。但你確實添加了清晰的內容:在ul#菜單中也是如此! – 2010-02-12 20:37:46
雖然我不想將菜單浮起來,但這使得我的主要坐在它旁邊,而不是在它下面。我想我可以爲main添加另一個清除 – 2010-02-12 20:39:24
我不知道你添加了哪些其他的css,但是我給你的解決方案工作。我自己嘗試了一個新的MVC網站。菜單移到左側,所有其他元素都保留在原來的位置。 – 2010-02-12 20:45:46