时间戳

首页 > 解决方案 > 我无法弄清楚导航栏中的哪个元素有不需要的边距/填充

html - 我无法弄清楚导航栏中的哪个元素有不需要的边距/填充

问题描述

我希望箭头指示的边框从导航栏的顶部到底部，我不知道填充/边距在哪里阻止它这样做。

我试图在下面的所有元素上将填充和边距都设置为 0px，但除了摆脱我设置的 p/m 之外，这条线仍然不会一直走下去。

我错过了什么，请帮忙！

导航栏

这是我的代码：

nav { /*navbar*/
    border-bottom: 2px solid rgba(121, 85, 72, 0.7);
    border-top: 2px solid rgba(121, 85, 72, 0.7);
    width: 90%;
    margin: 10px auto 30px auto;
}

nav > ul {  /*all elements together on navbar*/
    width: 90%;
    text-align: center;
}

nav > ul > li { /*all individual elements on navbar*/
    display: inline-block;
    padding: 10px 15px 0px 15px;
}

nav > ul > li > .logo {  /*logo on navbar*/
    margin-right: 100px;
    font-size: 30px;
}

nav > ul > li > a > i { /*icons on navbar*/
    margin-right: 5px;
}

nav > ul > li > a > .button-user { /*user button on navbar*/
    margin-left: 100px;
    font-size: 35px;
    vertical-align: middle;
    color: rgba(121, 85, 72, 0.9);
}

.logo { /*logo*/
    color: #FF7F50;
}

.text-navbar {
    color: rgba(121, 85, 72, 0.9);
    font-size: 17px;
}
    <header>
        <nav>
            
            <ul>
                <li><a asp-controller="Home" asp-action="Index" class="logo">Swapet</a></li>
                <li class="border-right"><a asp-controller="Home" asp-action="Index" class="text-navbar"><i class="fas fa-question-circle text-navbar"></i>Kako deluje?</a></li>
                <li><a asp-controller="Home" asp-action="Index" class="text-navbar"><i class="fas fa-cat"></i>Muce</a></li>
                <li><a asp-controller="Home" asp-action="Index" class="text-navbar"><i class="fas fa-dog"></i>Kužki</a></li>
                <li><a asp-controller="Home" asp-action="Index"><i class="fas fa-user-circle button-user"></i></a></li>
            </ul>

        </nav>
    </header>

标签： htmlcssbootstrap-4

解决方案

我做的！我解决了这个问题。我禁用了 botstrap 的 CSS，问题消失了，但我仍然想使用 Bootsrap。所以我去看看Visual Studio是否给出了“填充：”或“边距：”的其他有用建议，发现未设置。原来有一个底部边距设置，它不能被我的 CSS 中的新边距覆盖，但未设置有效。仍然不知道为什么。

Tl;博士：

nav > ul { /*all elements together on navbar*/
    width: 90%;
    text-align: center;
    margin: unset; <-- this
}

推荐阅读