Question

这是作业。这是Master页面上导航菜单的代码，我想从列表中删除项目符号：

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" Font-Bold="True" Font-Names="Calibri" Font-Size="Large" ForeColor="#FFFFFF">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/> 
                        <asp:MenuItem NavigateUrl="~/Rating.aspx" Text="Rating"/> 
                        <asp:MenuItem NavigateUrl="~/Favorite.aspx" Text="Favorite"/> 
                        <asp:MenuItem NavigateUrl="~/Admin/Default.aspx" Text="Administrator" /> 

                    </Items>
                </asp:Menu>

由于ID =“NavigationMenu”，这个CSS语法不应该删除子弹吗？

ul#NavigationMenu {
    list-style-type: none;
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;

}

这是呈现的HTML：

<a href="#NavigationMenu_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Skip Navigation Links</a><div class="menu" id="NavigationMenu">
    <ul class="level1">
        <li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="Rating.aspx">Rating</a></li><li><a class="level1" href="Favorite.aspx">Favorite</a></li><li><a class="level1" href="Admin/Default.aspx">Administrator</a></li>
    </ul>
</div><a id="NavigationMenu_SkipLink"></a>

Answer 1

我认为您遇到的问题是，当它进入HTML页面时，ID会从您在ASPX文件中键入的内容进行更改。 ASP.Net由于各种原因（包括嵌套控件）自动执行此操作。您可以通过查看HTML的来源并查看应用于列表标记的ID来检查HTML中显示的ID。

选项1：
您可以更改CSS以使用您在源中看到的ID。这不是一个好的选择，因为每次要应用样式时都需要检查网页上的ID。除非没有其他方法，否则不应将样式应用于动态创建的名称。

选项2：
因为ID在页面上应该是唯一的，所以不需要使用ul标签限定CSS。它将应用于具有您指定的ID的元素（注意有关更改ID的注释）。删除CSS中的“ul”，如果要使用带ID的CSS，则使用#ID_OF_TAG。

选项3：
这是最好的选择。使用类应用CSS而不是使用ID连接。使用该类，使用'.ClassName'表示法。 ASP.Net不会更改类名，如果在另一个控件中使用了相关控件，则可以移植。 CSS类名通常应用于ASP.Net控件的“CssClass”属性中。使用CssClass时，最好使用ul.MY_CLASS_NAME表示法，因为类名可以由各种标记共享。

---- UPDATE ------

在看到HTML的添加后，您遇到的问题是菜单的ID被放在DIV标签而不是UL标签上。您需要在“ul.level1”的定义中设置CSS。

------ HTML SAMPLE ------
这是添加了CSS的HTML，删除了子弹样式。我测试了这个并且子弹没有出现。

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <meta charset="UTF-8" />

    <style type="text/css">
        ul.level1 {
            list-style-type:none;
            }
    </style>
</head>

<body>
<a href="#NavigationMenu_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Skip Navigation Links</a><div class="menu" id="NavigationMenu">
    <ul class="level1">
        <li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="Rating.aspx">Rating</a></li><li><a class="level1" href="Favorite.aspx">Favorite</a></li><li><a class="level1" href="Admin/Default.aspx">Administrator</a></li>
    </ul>
</div><a id="NavigationMenu_SkipLink"></a>
</body>
</html>

如果未按预期应用CSS属性，则可能是两件事之一。可能是CSS位于未导入的文件中。我不指望是这样的。其次是CSS类可能被另一个类覆盖。您可以更改类的名称以进行测试。

使用CSS从ASP.NET母版页中删除项目符号

1 个答案: