我正在做一个学校项目,我正在制作一个网站,我们差不多完成了。然而,有一件烦人的事情我个人无法解决。
我在页面周围有一个奇怪的边框,我不知道如何修复它。我想要的是蓝色导航栏从页面的左侧一直延伸到右侧,但有一条白色条纹。
屏幕截图
.menu-navigation-round {
font: bold 12px Arial, Helvetica, sans-serif;
text-align: center;
height: auto;
background-color: #195b92;
widht: 100%;
padding: 25px;
}
.menu-navigation-round a {
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 20px auto;
line-height: 2;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.menu-navigation-round a.selected {
border: solid;
border-width: 0.5px;
border-color: white;
color: white;
padding: 10px;
border-radius: 25px;
}
<nav class="menu-navigation-round">
<a href="#" class="selected">Stemmen</a>
<a href="faq.php">FAQ</a>
<a href="contact.php">Contact</a>
<a href="login.php">Uitloggen</a>
</nav>
我认为您需要unset
机身边缘
.menu-navigation-round {
font: bold 12px Arial, Helvetica, sans-serif;
text-align: center;
height: auto;
background-color: #195b92;
widht: 100%;
padding: 25px;
}
.menu-navigation-round a {
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 20px auto;
line-height: 2;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.menu-navigation-round a.selected {
border: solid;
border-width: 0.5px;
border-color: white;
color: white;
padding: 10px;
border-radius: 25px;
}
body {
margin: unset;
}
<nav class="menu-navigation-round">
<a href="#" class="selected">Stemmen</a>
<a href="faq.php">FAQ</a>
<a href="contact.php">Contact</a>
<a href="login.php">Uitloggen</a>
</nav>
您的网站默认为有余量。尝试将边距0应用于所有对象。
* { margin: 0; padding: 0; box-sizing: border-box; }
* { box-sizing: border-box; padding: 0; margin: 0; }
.nav { width: 100%; height: 60px; background: red; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.nav a { padding: 0 10px; color: #fff; text-decoration: none; }
<html>
<body>
<div class="nav">
<a href="/">Link1</a>
<a href="/">Link2</a>
<a href="/">Link3</a>
<a href="/">Link4</a>
</div>
</body>
</html>