Can'；我不能让我的导航栏集中在网站ASP.Net上_Asp.net_Css_Visual Studio 2010

Can'；我不能让我的导航栏集中在网站ASP.Net上

asp.net css visual-studio-2010

Can'；我不能让我的导航栏集中在网站ASP.Net上,asp.net,css,visual-studio-2010,Asp.net,Css,Visual Studio 2010,这是我的asp.net页面代码和CSS，希望有人能发现我做错了什么。我不熟悉css和asp.net。我将我所知道的大部分知识用于Div标签等 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MHConstruction.SiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/

这是我的asp.net页面代码和CSS，希望有人能发现我做错了什么。我不熟悉css和asp.net。我将我所知道的大部分知识用于Div标签等

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MHConstruction.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/NewStyles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">

        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Homes.jpg" ImageAlign="Middle" Width="960px"/>
            <div class="title">

            </div>
            <div class="loginDisplay" dir="ltr">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <center>
            <div class="clear hideSkiplink">

                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" >
                    <Items>
                        <asp:MenuItem NavigateUrl="~/HomePage.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                        <asp:MenuItem NavigateUrl="~/Basic.aspx" Text="Basic"/>
                        <asp:MenuItem NavigateUrl="~/Standard.aspx" Text="Standard"/>
                        <asp:MenuItem NavigateUrl="~/Luxury.aspx" Text="Luxury"/>
                        <asp:MenuItem NavigateUrl="~/CustomerHome.aspx" Text="Customers"/>
                        <asp:MenuItem NavigateUrl="~/AdminHome.aspx" Text="Admin"/>
                        <asp:MenuItem NavigateUrl="~/Logout.aspx" Text="Logout"/>
                    </Items>
                </asp:Menu>

            </div>
            </center>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

    </div>
    </form>
</body>
</html>

两件事：您应该按照菜单样式块的方式设置样式

<style type="text/css"> 
    /* <![CDATA[ */
    #NavigationMenu img.icon { border-style:none;vertical-align:middle; }
    #NavigationMenu img.separator { border-style:none;display:block; }
    #NavigationMenu img.horizontal-separator { border-style:none;vertical-align:middle; }
    #NavigationMenu ul { list-style:none;margin:0;padding:0;width:auto; }
    #NavigationMenu ul.dynamic { z-index:1; }
    #NavigationMenu a { text-decoration:none;white-space:nowrap;display:block; }
    #NavigationMenu a.static { padding-left:0.15em;padding-right:0.15em; }
    #NavigationMenu a.popout { background-image:url("/WebResource.axd?d=EMSWJvMqJTxHa4d4S135BwGFA2dQw5pII3m5syZ8p1nYnD3jAotY_XzYmVV_PYohvnNLCZwIu1hO3tdfjxDCY21kymwZShHj9fcW_mi5QQ41&t=634933845276428750");background-repeat:no-repeat;background-position:right center;padding-right:14px; }
    /* ]]> */
</style>


/*  */

然后，您应该将菜单的包装div设置为50%：

            <div style="border:1px solid red; width:50%">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="true" Orientation="Horizontal" >
                    <Items>
                        <asp:MenuItem NavigateUrl="~/HomePage.aspx" Text="Home" />
                    </Items>
                </asp:Menu>
            </div>

然后使用

空白：nowrap以确保项目不被包装
            <div style="border:1px solid red; width:50%">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="true" Orientation="Horizontal" >
                    <Items>
                        <asp:MenuItem NavigateUrl="~/HomePage.aspx" Text="Home" />
                    </Items>
                </asp:Menu>
            </div>