当在 ASP.NET 中创建一个新的 Web 应用程序项目时,它在 site.master 页面中带有一个 NavigationMenu,它有 2 个元素(Home 和 About),请让我知道如何将此菜单对齐到右侧。
这是屏幕截图和代码:
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="False" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="AnaSayfa"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Hakkında" />
</Items>
</asp:Menu>
</div>
这是呈现的html代码:
<div style="float: left;" id="NavigationMenu" class="menu">
<ul style="width: auto; float: left; position: relative;" class="level1 static" role="menubar"
tabindex="0">
<li style="float: left; position: relative;" class="static" role="menuitem"><a class="level1 static"
tabindex="-1" href="Default.aspx">Ana Sayfa</a></li>
<li style="float: left; position: relative;" class="static" role="menuitem"><a class="level1 static"
tabindex="-1" href="About.aspx">Hakkında</a></li>
</ul>
</div>
这里的CSS:
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
text-align: right;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}