Question

我正在尝试在我正在为面包店网站制作的垂直导航菜单中添加链接。

然而，当我进行更改时，页面完全没有变化，根本没有变化，整个菜单移动或填充干扰悬停序列，并且当悬停在它们上方时某些链接不会突出显示。

我尝试对％，em和像素进行更改，但我什么都没得到。

如果有帮助，我会使用chrome和sublime text btw。

这是HTML：

<!-- NAVIGATION LINKS-->
<div id = "navibar">
    <nav>

        <a class = "navibar" href = "aboutthebakery.html"> ABOUT THE BAKERY </a>
</br>
        <a class = "navibar" href = "bakeryselection.html"> BAKERY SELECTIONS </a>
</br>
        <a class = "navibar" href = "viewthemenu.html">VIEW THE MENU </a>
</br>
        <a class = "navibar" href = "visitalocation.html"> VISIT A LOCATION </a>
</br>
        <a class = "navibar" href = "http://example.com/--.html"> WEDDINGS & OCCASIONS </a>

</br>
        <a class = "navibar" href = "http://example.com/--.html"> CATERING 
        </a>
    </nav>
</div>

这是CSS（我刚刚将所有内容改为0％）：

/* NAVIGATION DIV CONTAINING LINKS */
#navibar {
    text-align: center;

    margin-top: 3%;
    margin-right: 48%;
    margin-bottom: 0%;
    margin-left: 8%;

}

.navibar {
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;

    padding-top: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;

    color: #000000;

    text-decoration: none;

    font-size: 12px;
    font-family: Verdana; 
}

.navibar:hover {
    color: #c92727;

    text-decoration: none;

    font-size: 12px;
    font-family: Verdana; 
}

Answer 1

您需要摆脱<br>并制作链接块级元素。内联块元素可以有填充，但它是内联块和<br>的组合导致您的问题。 <br>并不能很好地尊重边距/填充。尝试使用

.navibar {
    display: block;
    padding: 10px 0;
}

填充功能不正常，百分比，ems和像素的变化

1 个答案: