0

我很难找到asp:Menu与页面控制和居中相关的问题的解决方案。我真的很惊讶我在 Google 上搜索的所有解决方案要么不使用asp:Menu控件，要么只使用列表或表格。

我知道margin:0auto` 并添加宽度是可行的，但是当我将它用于菜单控件时，我无法使其正常工作。

这是我的母版页：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="PageWrapper">
                <header></header>
                <nav>
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" DataSourceID="dsSiteMap" CssClass="MainMenu" />
                    <asp:SiteMapDataSource runat="server" ID="dsSiteMap" ShowStartingNode="false" />
                </nav>
                <section id="MainContent">
                    <asp:ContentPlaceHolder id="cpMainContent" runat="server"></asp:ContentPlaceHolder>
                </section>
                <footer></footer>
            </div>
        </form>
    </body>
</html>

CSS：

body
{
    margin: 0;
    background-color: gray;
}

#PageWrapper
{
    width: 1366px;
    background-color: white;
    margin: auto;
}

nav
{
    width: 1366px;
    height: 36px;
    background-color: seagreen;
}

nav a
{
    color: #fff;
}

.MainMenu
{
    border: 1px solid #999999;
    width: 1366px;
    height: 19px;
    background-color: #555555;
}

ul.level1
{ 
    display: block;
    width: 300px;
    text-align: center;
    margin: 0 auto;
}

网站地图：

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/">
        <siteMapNode url="~/Default.aspx" title="Home"  description="Go to the homepage" />
        <siteMapNode url="~/NewTicket.aspx" title="New Ticket"  description="Create a new ticket" />
        <siteMapNode url="~/Search.aspx" title="Search" description="Search tickets" />
    </siteMapNode>
</siteMap>

有趣的是，当我创建一个标签并将其放置在占位符中，margin: 0 auto并width: auto在居中工作时。

4

3 回答 3

1

谢谢大家。

我终于能够弄清楚了。

我将样式编辑到我的导航父元素：

nav{
clear: both;
text-align: center;
display: table;
margin: 0 auto;}

因此，我没有将其显示为块，而是将其设置为表格。有趣的是它仍然呈现为一个列表。我要清除它，因为它之前有元素浮动到左侧。通过这个问题，我确实学到了更多关于 CSS 的知识。

只是为了一种造型就遇到这么多麻烦，有点疯狂。惊讶

于 2013-10-17T13:44:30.107 回答
0

我不记得为 asp:menu 生成的标记，但我认为问题出在您的选择器中，您正在使用与宽度匹配的内容.MainMenu来定义它，因此即使您设置 margin-right/left auto 它也不起作用。width: 1366px;nav

要将其居中，您可以设置一个小于其父级的宽度，或者您可以display: inline-block;为菜单和text-align:center;导航设置。

两个选项的示例：http: //jsfiddle.net/T9SvT/

于 2013-10-14T19:22:44.720 回答
0

我复制了你上面的例子。#PageWrapper 宽度为 1366 像素，位于页面中心。它包含同样为 1366 像素宽的菜单控件，其单元格在宽度上均匀分布。我在 Chrome 和 IE9 中对此进行了测试。但是，我的站点地图中只有 3 个项目。这可能与您的问题有关：菜单有多宽？

请记住，它asp:Menu呈现为 HTML 表格，因此当您对其应用样式时，这基本上就是您正在使用的内容。我建议将<nav>区域调整为您希望菜单所在的位置，并简单地使菜单用 Width="100%" 填充该空间。

当然“浮动”不应该是必要的。

于 2013-10-15T21:09:33.263 回答