CSS网格第1行开始时有页边距,但想不通为什么?

问题描述 投票:0回答:2

从来没有遇到过css网格中第一行与浏览器窗口不齐的情况。不知道这个差距是怎么来的,但这个页面上的所有其他网格都很好用。我需要一个标志更接近浏览器窗口的边缘。

下面是我的html代码和与html一起的css。

<menu>
        <asp:HyperLink NavigateUrl="~/Default.aspx" runat="server">
            <asp:Image ID="imgLogo" CssClass="Logo" runat="server" ImageUrl="~/Images/LogoOrange.png" />
        </asp:HyperLink>
        <nav>
            <ul>
                <li>About Us</li>
                <li>Services</li>
                <li>Online Estimate</li>
                <li>Contact Us</li>
            </ul>
        </nav>
        <div class="PhoneNumber">
            <asp:Label runat="server" Text="" />
        </div>
    </menu>

.Logo {
    height: 80px;
    margin: 5px 25px 0px 5px;
}

menu {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    min-width: 1024px;
}

menu nav {
    grid-column: 2/3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

menu nav ul {
    margin: 0;
}

menu nav ul li {
    display: inline-block;
    padding: 15px;
    cursor: pointer;
    margin: 0px 10px;
    color: black;
    font-weight: bold;
    font-size: 16px;
}
html css grid
2个回答
0
投票

浏览器正在给你的菜单添加Padding:0这样就可以了

menu {
    margin: 0;
    padding:0;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    min-width: 1024px;
}

0
投票

你必须删除显示:flex。

menu nav {
grid-column: 2/3;
display: block;
align-items: center;
justify-content: flex-end;

}

© www.soinside.com 2019 - 2024. All rights reserved.