当我在无序列表中使用runat =“ server”时，为什么CSS样式无法正确格式化？

Question

我想做的是让管理员在导航部分中登录时使列表项可见。 我无法使用广告，因此可以使用角色，因此我在使用SQL Server来控制哪些用户有权访问哪些内容。 我找到了一种方法，使管理员登录后即可看到列表项，但是要这样做，我不得不在无序列表中使用runat =“ server”。 一旦使用此功能，就不再使用用于导航的CSS格式。 我如何解决此问题并实现我想做的事情？ 这是我在母版页中的代码。

<section runat="server" id="login">
   <asp:LoginView id="loginview" runat="server" ViewStateMode="Disabled">
      <LoggedInTemplate>
         <p id="paragraph">
            Welcome,
            <asp:LoginName ID="loginName" runat="server" CssClass="username" />
            </a>!
            <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/Account/Login.aspx" />
            <ul runat="server" id="menu">
               <li><a href="~/Dashboard.aspx">Dashboard</a></li>
               <li><a runat="server" href="~/DeliveredDeals.aspx">Delivered Deals</a></li>
               <li><a runat="server" href="~/DealTracking.aspx">Deal Tracking</a></li>
               <li><a runat="server" id="allUsers" href="~/Users.aspx" visible="false">Users</a></li>
            </ul>
         </p>
      </LoggedInTemplate>
   </asp:LoginView>
</section>

这就是我的设置方法。 从<ul>删除runat="server" ，我将不再能够查看新列表项（allUsers），但是格式又恢复了。 任何建议表示赞赏。 谢谢。

这是CSS。

/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}

    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

    #login a.username {
        background: none;
        margin-left: 0px;
        text-decoration: underline;
    }

    #login ul {
        margin: 0;
    }

    #login li {
        display: inline;
        list-style: none;
    }


/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

        ul#menu li a:hover {
            color: #333;
            text-decoration: none
        }

Answer 1

如果添加runat =“ server”，则ASP.NET将为ID添加前缀，这很可能会破坏CSS

例如 ：

如果将元素放在<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"><asp:Content>

它将<ul runat="server" id="menu">更改为<ul id="MainContent_menu">

因此，请检查页面源，然后调整CSS。

Answer 2

由于您使用runat="server" ，因此将通过ASP.NET修改ID，从而导致CSS问题。 您应该更改ul以使用类，而不是根据id设置样式。

<ul runat="server" class="menu">
    <!--Html-->
</ul>

CSS：

/* menu
----------------------------------------------------------*/
 ul.menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}
ul.menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
}
ul.menu li a {
    background: none;
    color: #999;
    text-decoration: none;
}
ul.menu li a:hover {
    color: #333;
    text-decoration: none
}

Answer 3

您也可以考虑为此使用css类而不是and ID。 然后，您不必担心.NET将名称动态添加到元素的样式设置部分中，从而使CSS易于处理。

换句话说，应该是这样的：

<ul runat="server" class="menu">
    <li>lorem ipsum</li>
</ul>