我的边界有一个问题。问题是我有两个不同的边界：一个在"DUCO"按钮(我的名字(上，另一个在你悬停在文本上时创建自己。问题是边界的大小不一样。有人能帮忙吗？(你看不到背景，但这没什么大不了的(
感谢
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.hoofd-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.hoofd-nav li
{
display: inline-block;
}
.hoofd-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.hoofd-nav li.actief
{
border: 3px solid white;
}
.hoofd-nav li a:hover
{
border: 3px solid white;
}<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="rij">
<ul class="hoofd-nav">
<li class="actief"><a href=""> Duco </a></li>
<li><a href=""> Hobbys </a></li>
<li><a href=""> Dromen </a></li>
</ul>
</div>
</header>
</body>
</html>在a标记上设置.active类会更容易。然后，您还可以设置transparent边界来消除抖动。
问题在于a和li标签的混合。所以这个例子是针对a标签的，但也可以是li标签。
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.hoofd-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.hoofd-nav li
{
display: inline-block;
}
.hoofd-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
border: 3px solid transparent; /* Remove wobble */
}
.hoofd-nav li a.actief
{
border: 3px solid white;
}
.hoofd-nav li a:hover
{
border: 3px solid white;
}<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="rij">
<ul class="hoofd-nav">
<li><a href="" class="actief"> Duco </a></li>
<li><a href=""> Hobbys </a></li>
<li><a href=""> Dromen </a></li>
</ul>
</div>
</header>
</body>
</html>您的静态边界(在"DUCO"上的边界(和另一个边界(悬停在"DUGO"上时出现的边界(似乎不是同一元素的边界！
静态的一个是li的边界，而另一个应用于li内部的a标签。
尝试将两个边界属性应用于同一个元素，它应该可以正常工作。