时间戳

首页 > 解决方案 > 菜单和垂直导航栏之间的额外空间

html - 菜单和垂直导航栏之间的额外空间

问题描述

我正在使用引导程序编写网站，我在垂直导航栏和我的网站菜单之间获得了额外的空间。这就像大屏幕上的 +/- 10 像素，但因此有一个水平条。我的代码：

<header>
    <div class="col-sm-8 offset-sm-2">
        <a href="logo"><img src="logo.png" width="100%"/></a>
    </div>
    <nav>
        <ul class="menu col-sm-12">         
            <li><a href="start"><i class="icon-users"></i>  About us</a></li>
            <li><a href="out-products"><i class="icon-leanpub"></i>  Products</a></li>
            <li><a href="contact"><i class="icon-mail-alt"></i>  Contact</a></li>
        </ul>   
    </nav>
</header>

和.menuCSS 中的类：

.menu
{
    list-style-type: none;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
    font-size: 20px;
    min-height: 30px;
    line-height: 150%;
    letter-spacing: 1px;
    background: linear-gradient(to top, rgba(165,160,160,1), rgba(0,0,0,0));
}

菜单

任何人都知道如何解决这个问题？

标签： htmlcssbootstrap-4

解决方案

您的 HTML 中有一些错误，列应该是这样的行：

<div class="row">
    <div class="col-8">
        <p> My content </p>
    </div>

    <div class="col-4">
        <p> My other content </p>
    </div>
</div>

如果您从 .menu 中删除 padding-top 或将其设置为 0，您的问题可能会得到解决

.menu
    {
    list-style-type: none;
    padding-top: 0; // do not add padding to top
    padding-bottom: 8px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
    font-size: 20px;
    min-height: 30px;
    line-height: 150%;
    letter-spacing: 1px;
    background: linear-gradient(to top, rgba(165,160,160,1), rgba(0,0,0,0));
}

推荐阅读