顶层面板左侧的间隙答案

【问题标题】：Gap on Left Side of Top Level Panel顶层面板左侧的间隙
【发布时间】：2021-07-08 19:07:15
【问题描述】：

我尝试使用母版页创建的“导航菜单”左侧出现空白：

注意：此屏幕截图最顶部的灰色部分是 Chrome 地址栏的底部，不是网站的一部分

在开发工具中检查时，我发现只有 body 元素，然后是我的 form 元素，它没有占据 body 的全部宽度。

MasterPage.Masterhtml:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="Website1.MasterPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder runat="server" ID="stylesheets">
        <link rel="stylesheet" href="Styles/Styles.css" type="text/css" />
    </asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server" class="master-form">
        <asp:Panel runat="server" ID="pnlPage" CssClass="page">
            <asp:Panel runat="server" ID="pnlNavMenu" CssClass="nav-menu-container">
                <asp:Menu runat="server" ID="menuNav" CssClass="nav-menu" EnableViewState="false" Orientation="Horizontal" DynamicHorizontalOffset="0" StaticSubMenuIndent="0" StaticEnableDefaultPopOutImage="false">
                    <StaticMenuItemStyle HorizontalPadding="10px" CssClass="nav-menu-static" />
                    <DynamicMenuItemStyle HorizontalPadding="10px" VerticalPadding="1px" CssClass="nav-menu-dynamic" />
                    <Items>
                        <asp:MenuItem Text="Home" NavigateUrl="~/Default.aspx" />
                        <asp:MenuItem Text="Databases" NavigateUrl="#">
                            <asp:MenuItem Text="Test1" NavigateUrl="#" />
                            <asp:MenuItem Text="Test1" NavigateUrl="#" />
                            <asp:MenuItem Text="Test1" NavigateUrl="#" />
                            <asp:MenuItem Text="Test1" NavigateUrl="#" />
                        </asp:MenuItem>
                    </Items>
                </asp:Menu>
            </asp:Panel>
            <asp:Panel runat="server" ID="pnlContent">
                <asp:ContentPlaceHolder ID="BodyContent" runat="server">
                </asp:ContentPlaceHolder>
            </asp:Panel>
        </asp:Panel>
    </form>
</body>
</html>

Default.aspxhtml:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Website1.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
    hello world
</asp:Content>

Styles.csscss：

body {
    margin-top: 0px;
    background-color: #fdfdfd;
    width: 100%;
}

.master-form {
    width: 100%;
}

.page {
}

.nav-menu-container {
    padding: 15px 15px 15px 15px;
    background-color: #2f2f2f;
}

.nav-menu {
}

.nav-menu-static {
    color: #fdfdfd;
}

    .nav-menu-static:hover {
        background-color: darkgray;
    }

.nav-menu-dynamic {
    background-color: #2f2f2f;
    color: #fdfdfd;
}

    .nav-menu-dynamic:hover {
        background-color: darkgray;
    }

由于css 的变化，我无法让“导航菜单”填充那个小空白。

【问题讨论】：

标签： html css asp.net

【解决方案1】：

尝试以下方法：

body { margin: 0 }

【讨论】：