asp.net – 在div标签内右对齐菜单控件

发布时间：2020-12-16 06:47:43 所属栏目：asp.Net 来源：网络整理

导读：创建ASP.NET中的新Web应用程序项目时,它会在site.master页面中附带一个NavigationMenu,其中包含2个元素(Home About),请让我知道如何将此菜单对齐到右侧. 这是截图码： div class="clear hideSkiplink" asp:Menu ID="NavigationMenu" runat="server" CssClass

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

解决方法

添加text-align：right;到Site.css中的div.menu样式.

因为有些东西正在添加浮动：左;菜单div,你需要在你的CSS中使用float：right！important;根据拉吉夫的建议.让你的CSS看起来像这样：

div.menu
{
    padding: 4px 0px 4px 8px;
    text-align: right;
    float: right !important;
}

应用的手动样式可能是由于某些内置菜单样式.查看文档和其中包含的演练：http://msdn.microsoft.com/en-us/library/ecs0x9w5(v=vs.100)特别是曾经与ManuStyles和MenuItemStyles相关的内容.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!