开发者

What CSS rules does the Menu Server Control implement to renders as a horizontal menu?

For the ASP.NET Menu Server Control whose RenderMode is set to "List", there is an "开发者_如何学运维Orientation" property which decides whether the menu would render as a horizontal or a vertical menu. I have compared the two HTML source code and was unable to find out which part of the HTML/CSS code set the orientation of the menu(unordered list).


Generally, (un)ordered lists are made to render horizontally by either floating the list items to the left:

li {
    float: left;
}

or by making them inline elements instead of block elements:

li {
    display: inline;
}

I don't know off the top of my head if this is the approach that Microsoft takes, but it's probably similar.


(ASP.NET 4)

Using the following code (two menus, one with vertical, one with horizontal orientation):

<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>

This is what you see in Chrome's style inspector for the first (vertical):

What CSS rules does the Menu Server Control implement to renders as a horizontal menu?

And this for the second (horizontal):

What CSS rules does the Menu Server Control implement to renders as a horizontal menu?

So the difference is an inline {float: left} on menu item list items, like Cory Larson's first suggestion.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜