从来没有遇到过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;
}
浏览器正在给你的菜单添加Padding:0这样就可以了
menu {
margin: 0;
padding:0;
display: grid;
grid-template-columns: 1fr 5fr 1fr;
min-width: 1024px;
}
你必须删除显示:flex。
menu nav {
grid-column: 2/3;
display: block;
align-items: center;
justify-content: flex-end;
}