菜单服务器控件实现了哪些 CSS 规则以呈现为水平菜单？答案

【问题标题】：What CSS rules does the Menu Server Control implement to renders as a horizontal menu?菜单服务器控件实现了哪些 CSS 规则以呈现为水平菜单？
【发布时间】：2018-09-23 23:20:35
【问题描述】：

对于 RenderMode 设置为“列表”的 ASP.NET 菜单服务器控件，有一个“方向”属性决定菜单是呈现为水平菜单还是垂直菜单。我比较了两个 HTML 源代码，无法找出 HTML/CSS 代码的哪一部分设置了菜单的方向（无序列表）。

【问题讨论】：

标签： asp.net

【解决方案1】：

通常，（无）有序列表是通过将列表项向左浮动来水平呈现的：

li {
    float: left;
}

或者通过使它们成为内联元素而不是块元素：

li {
    display: inline;
}

我不知道这是否是微软采用的方法，但它可能是相似的。

【讨论】：

【解决方案2】：

（ASP.NET 4）

使用以下代码（两个菜单，一个垂直方向，一个水平方向）：

<asp:Menu runat="server">
    <Items>
        <asp:MenuItem Text="item1" />
        <asp:MenuItem Text="item2">
            <asp:MenuItem Text="item2.1" />
            <asp:MenuItem Text="item2.2" />
        </asp:MenuItem>
    </Items>
</asp:Menu>
<asp:Menu Orientation="Horizontal" runat="server">
    <Items>
        <asp:MenuItem Text="item1" />
        <asp:MenuItem Text="item2">
            <asp:MenuItem Text="item2.1" />
            <asp:MenuItem Text="item2.2" />
        </asp:MenuItem>
    </Items>
</asp:Menu>

这是您在 Chrome 的样式检查器中看到的第一个（垂直）：

这是第二个（水平）：

因此，区别在于菜单项列表项上的内联 {float: left}，就像 Cory Larson 的第一个建议一样。

【讨论】：

嗨，我的 HTML 代码版本根本没有 float: left;。我使用站点地图文件来构建菜单。你能试试吗？谢谢。