Question

这是我的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>

这也是我目前正在使用的CSS。我只发布了应用于导航菜单的CSS。

    div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
    height: 51px;
}



div.menu
{
    float:right;
    position:relative;

    text-align:left;
}

div.menu ul
{
    list-style:none;
    position:relative;
    left:35%;

}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;

}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

Answer 1

两件事：您应该以与菜单的样式块相同的方式设置样式

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

然后使用菜单类本身的white-space: nowrap;设置（不是ul / li / a类）来确保项目不会换行。

无法让我的导航栏在ASP.Net网站上居中

1 个答案: