Question

我的边界有一个问题。问题是我有2个不同的边框：一个位于“ 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>

Answer 1

在.active标签上设置a类会更容易。然后，您还可以设置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>

Answer 2

您的静态边框（“ DUCO”上的一个边框）和另一边框（将鼠标悬停在“ DUCO”上时出现的边框）似乎不是同一元素的边框！

静态的一个是li的边框，而另一个是在a内部的li标记上。

尝试将两个边框属性都应用到同一元素上，并且应该可以正常工作。

边界问题

2 个答案: