删除导航边框和导航内元素之间的空格
删除导航边框和导航内元素之间的空格
提问于 2021-06-01 04:31:14
这不是一个太大的问题，但我想知道为什么导航栏的边框和角落的元素之间仍然有一个空间。这是我的HTML和CSS代码，以及我提到的问题的图像。我已经改变了页边距，但仍然有空格，我也尝试将元素放在与元素相同的行上，但空格仍然存在。
重要提示:放大页面时，页边距将消失
a {
display: block;
text-decoration: none;
text-align: center;
padding: 1em;
margin: 0;
}
a:hover {
background-color: green;
}
ul,
li {
display: inline-block;
padding: 0;
margin: 0;
}
ul {
display: flex;
max-width: 50%;
justify-content: space-around;
flex-grow: 1;
}
nav {
position: sticky;
top: 0;
width: 90%;
margin: 0;
padding: 0;
border-left: 5px solid black;
border-right: 5px solid black;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
background-color: greenyellow;
}<nav>
<a href="#home" id="ho">Home</a>
<ul>
<li>
<a href="#products">Products</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li>
<a href="#about">About</a>
</li>
</ul>
<a href="signup">Sign Up</a>
</nav>
回答 1
Stack Overflow用户
发布于 2021-06-01 05:21:35
现在不应该发生这种情况，我已经给了margin: 8px 0，它只是margin: 8px
body {
margin: 8px 0;
}
a {
display: block;
text-decoration: none;
text-align: center;
padding: 1em;
margin: 0;
}
a:hover {
background-color: green;
}
ul,
li {
display: inline-block;
padding: 0;
margin: 0;
}
ul {
display: flex;
max-width: 50%;
justify-content: space-around;
flex-grow: 1;
}
nav {
position: sticky;
top: 0;
width: 90%;
margin: 0;
padding: 0;
border-left: 5px solid black;
border-right: 5px solid black;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
background-color: greenyellow;
}<nav>
<a href="#home" id="ho">Home</a>
<ul>
<li>
<a href="#products">Products</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li>
<a href="#about">About</a>
</li>
</ul>
<a href="signup">Sign Up</a>
</nav>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67779902
复制相关文章
相似问题
腾讯云开发者
