如何删除导航栏和下拉菜单之间的空格

Question

如何删除导航栏和这两个菜单之间的空间＆＃34; Detalii＆＃34;和＆＃34;管理员＆＃34;？

由于我从每个div中删除2而不是向下移动而创建的空间，它只是在它和导航栏之间有一个空白区域，就像你在代码片段中看到的一样。

编辑：该代码段并未显示问题，因此这里是my JSfiddle

＆＃13;

＆＃13;

.navigation {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    height: 60px;
    border: 0px solid #E3E3E3;
    background-color: #1f1d1d;
    font-family: Arial, Helvetica, sans-serif;
    width: 1080px;
}

    .navigation a {
        float: left;
        font-size: 25px;
        color: antiquewhite;
        text-align: center;
        padding: 18px 20px;
        text-decoration: none;
        height: 25px;
        width: 174px;
    }

.dropdown {
    float: left;
    overflow: hidden;
}

    .dropdown .dropbtn {
        border-style: none;
        border-color: inherit;
        font-size: 25px;
        margin: 0px;
        outline: none;
        color: antiquewhite;
        padding: 18px 20px;
        background-color: inherit;
        font-family: inherit;
        width: 216px;
    }

    .navigation a:hover, .dropdown:hover .dropbtn {
        background-color: #4e3f3f;
    }

.dropdown-content {
    overflow: hidden;
    bottom: 0px;
    display: none;
    position: absolute;
    background-color: #1f1d1d;
    box-shadow: 0px 8px 16px 0px rgb(186,179,179);
    z-index: 1;
    width: 216px;
}

    .dropdown-content a {
        float: none;
        color: antiquewhite;
        padding: 19px 0px 20px 0px;
        text-decoration: none; 
        display: block;
        text-align: center;
        width: inherit;
    }

        .dropdown-content a:hover {
            background-color: #4e3f3f;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

＆＃13;

<div class="navigation">
                  <div style="width:20%; float:left">
                <a href="~/Pages/Home.aspx" runat="server">Home</a>
                      </div>
                <div class="dropdown" style="width:20%; float:left">
                    <button class="dropbtn">&nbsp;&nbsp; Detalii<i class="fa fa-caret-down">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </i>
                    </button>
                    <div class="dropdown-content">
                        <a href="~/Pages/Cafea.aspx" runat="server">Sortimente</a>
                        <a href="#">Cafea cu lapte</a>
                    </div>
                </div>
                <div style="width:20%; float:left">
                <a href="~/Pages/Magazin.aspx" runat="server">Magazin</a>
                    </div>
                <div style="width:20%; float:left">
                <a href="#despre" runat="server">Despre</a>
                    </div>
                <div class="dropdown" style="width:20%; float:left">
                    <button class="dropbtn" id="A1" runat="server" visible="false">Administrator</button>
                    <div class="dropdown-content">
                        <a href="~/Pages/Cafea_Overview.aspx" runat="server">Management</a>
                        <a href="~/Pages/Cont/Admin.aspx" runat="server">Utilizatori</a>
                    </div>
                </div>
            </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在你的下拉内容div的css中，为什么你有底：0px？当然，根据您的需要，您只需要使用top的正确值，即导航栏的总高度。在这种情况下，68px。

似乎太简单了。我误解了什么吗？

.navigation {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    height: 60px;
    border: 0px solid #E3E3E3;
    background-color: #1f1d1d;
    font-family: Arial, Helvetica, sans-serif;
    width: 1080px;
}

    .navigation a {
        float: left;
        font-size: 25px;
        color: antiquewhite;
        text-align: center;
        padding: 18px 20px;
        text-decoration: none;
        height: 25px;
        width: 174px;
    }

.dropdown {
    float: left;
    overflow: hidden;
}

    .dropdown .dropbtn {
        border-style: none;
        border-color: inherit;
        font-size: 25px;
        margin: 0px;
        outline: none;
        color: antiquewhite;
        padding: 18px 20px;
        background-color: inherit;
        font-family: inherit;
        width: 216px;
    }

    .navigation a:hover, .dropdown:hover .dropbtn {
        background-color: #4e3f3f;
    }

.dropdown-content {
    overflow: hidden;
    display: none;
    position:absolute;
    background-color: #1f1d1d;
    box-shadow: 0px 8px 16px 0px rgb(186,179,179);
    z-index: 1;
    width: 216px;
    top:68px;
}

    .dropdown-content a {
        float: none;
        color: antiquewhite;
        padding: 19px 0px 20px 0px;
        text-decoration: none; 
        display: block;
        text-align: center;
        width: inherit;
    }

        .dropdown-content a:hover {
            background-color: #4e3f3f;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

<div class="navigation">
                  <div style="width:20%; float:left">
                <a href="~/Pages/Home.aspx" runat="server">Home</a>
                      </div>
                <div class="dropdown" style="width:20%; float:left">
                    <button class="dropbtn">&nbsp;&nbsp; Detalii<i class="fa fa-caret-down">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </i>
                    </button>
                    <div class="dropdown-content">
                        <a href="~/Pages/Cafea.aspx" runat="server">Sortimente</a>
                        <a href="#">Cafea cu lapte</a>
                    </div>
                </div>
                <div style="width:20%; float:left">
                <a href="~/Pages/Magazin.aspx" runat="server">Magazin</a>
                    </div>
                <div style="width:20%; float:left">
                <a href="#despre" runat="server">Despre</a>
                    </div>
                <div class="dropdown" style="width:20%; float:left">
                    <button class="dropbtn" id="A1" runat="server" visible="false">Administrator</button>
                    <div class="dropdown-content">
                        <a href="~/Pages/Cafea_Overview.aspx" runat="server">Management</a>
                        <a href="~/Pages/Cont/Admin.aspx" runat="server">Utilizatori</a>
                    </div>
                </div>
            </div>

Answer 2

迈克尔打败了我。但他也是对的。他出来时跟我的解决方案一样。这确实有帮助。干杯。快乐编码

.navigation {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    height: 60px;
    border: 0px solid #E3E3E3;
    background-color: #1f1d1d;
    font-family: Arial, Helvetica, sans-serif;
    width: 1080px;
}

    .navigation a {
        float: left;
        font-size: 25px;
        color: antiquewhite;
        text-align: center;
        padding: 18px 20px;
        text-decoration: none;
        height: 25px;
        width: 174px;
    }

.dropdown {
    float: left;
    overflow: hidden;
}

    .dropdown .dropbtn {
        border-style: none;
        border-color: inherit;
        font-size: 25px;
        margin: 0px;
        outline: none;
        color: antiquewhite;
        padding: 18px 20px;
        background-color: inherit;
        font-family: inherit;
        width: 216px;
    }

    .navigation a:hover, .dropdown:hover .dropbtn {
        background-color: #4e3f3f;
    }

  .dropdown-content {
  overflow: hidden;
  top: 68px;
  display: none;
  position: absolute;
  background-color: #1f1d1d;
  box-shadow: 0px 8px 16px 0px rgb(186,179,179);
  z-index: 1;
  width: 216px;

    .dropdown-content a {
        float: none;
        color: antiquewhite;
        padding: 19px 0px 20px 0px;
        text-decoration: none; 
        display: block;
        text-align: center;
        width: inherit;
    }

        .dropdown-content a:hover {
            background-color: #4e3f3f;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

<div class="navigation">
                  <div style="width:20%; float:left">
                <a href="~/Pages/Home.aspx" runat="server">Home</a>
                      </div>
                <div class="dropdown" style="width:20%; float:left">
                    <button class="dropbtn">&nbsp;&nbsp; Detalii<i class="fa fa-caret-down">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </i>
                    </button>
                    <div class="dropdown-content">
                        <a href="~/Pages/Cafea.aspx" runat="server">Sortimente</a>
                        <a href="#">Cafea cu lapte</a>
                    </div>
                </div>
                <div style="width:20%; float:left">
                <a href="~/Pages/Magazin.aspx" runat="server">Magazin</a>
                    </div>
                <div style="width:20%; float:left">
                <a href="#despre" runat="server">Despre</a>
                    </div>
                <div class="dropdown" style="width:20%; float:left">
                    <button class="dropbtn" id="A1" runat="server" visible="false">Administrator</button>
                    <div class="dropdown-content">
                        <a href="~/Pages/Cafea_Overview.aspx" runat="server">Management</a>
                        <a href="~/Pages/Cont/Admin.aspx" runat="server">Utilizatori</a>
                    </div>
                </div>
            </div>

Answer 3

您可以尝试减少body。

的边距

body {
   margin-top: 0;
}

.navigation {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    height: 60px;
    border: 0px solid #E3E3E3;
    background-color: #1f1d1d;
    font-family: Arial, Helvetica, sans-serif;
    width: 1080px;
}

    .navigation a {
        float: left;
        font-size: 25px;
        color: antiquewhite;
        text-align: center;
        padding: 18px 20px;
        text-decoration: none;
        height: 25px;
        width: 174px;
    }

.dropdown {
    float: left;
    overflow: hidden;
}

    .dropdown .dropbtn {
        border-style: none;
        border-color: inherit;
        font-size: 25px;
        margin: 0px;
        outline: none;
        color: antiquewhite;
        padding: 18px 20px;
        background-color: inherit;
        font-family: inherit;
        width: 216px;
    }

    .navigation a:hover, .dropdown:hover .dropbtn {
        background-color: #4e3f3f;
    }

.dropdown-content {
    overflow: hidden;
    bottom: 0px;
    display: none;
    position: absolute;
    background-color: #1f1d1d;
    box-shadow: 0px 8px 16px 0px rgb(186,179,179);
    z-index: 1;
    width: 216px;
}

    .dropdown-content a {
        float: none;
        color: antiquewhite;
        padding: 19px 0px 20px 0px;
        text-decoration: none; 
        display: block;
        text-align: center;
        width: inherit;
    }

        .dropdown-content a:hover {
            background-color: #4e3f3f;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

<div class="navigation">
                  <div style="width:20%; float:left">
                <a href="~/Pages/Home.aspx" runat="server">Home</a>
                      </div>
                <div class="dropdown" style="width:20%; float:left">
                    <button class="dropbtn">&nbsp;&nbsp; Detalii<i class="fa fa-caret-down">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </i>
                    </button>
                    <div class="dropdown-content">
                        <a href="~/Pages/Cafea.aspx" runat="server">Sortimente</a>
                        <a href="#">Cafea cu lapte</a>
                    </div>
                </div>
                <div style="width:20%; float:left">
                <a href="~/Pages/Magazin.aspx" runat="server">Magazin</a>
                    </div>
                <div style="width:20%; float:left">
                <a href="#despre" runat="server">Despre</a>
                    </div>
                <div class="dropdown" style="width:20%; float:left">
                    <button class="dropbtn" id="A1" runat="server" visible="false">Administrator</button>
                    <div class="dropdown-content">
                        <a href="~/Pages/Cafea_Overview.aspx" runat="server">Management</a>
                        <a href="~/Pages/Cont/Admin.aspx" runat="server">Utilizatori</a>
                    </div>
                </div>
            </div>

Answer 4

稍微调整一下代码。删除溢出隐藏，底部并相对于下拉列表添加位置：

＆＃13;

＆＃13;

.navigation {
    margin-left: auto;
    margin-right: auto;
    height: 60px;
    border: 0px solid #E3E3E3;
    background-color: #1f1d1d;
    font-family: Arial, Helvetica, sans-serif;
    width: 1080px;
}

    .navigation a {
        float: left;
        font-size: 25px;
        color: antiquewhite;
        text-align: center;
        padding: 18px 20px;
        text-decoration: none;
        height: 25px;
        width: 174px;
    }

.dropdown {
    float: left;
    position: relative;
}

    .dropdown .dropbtn {
        border-style: none;
        border-color: inherit;
        font-size: 25px;
        margin: 0px;
        outline: none;
        color: antiquewhite;
        padding: 18px 20px;
        background-color: inherit;
        font-family: inherit;
        width: 216px;
    }

    .navigation a:hover, .dropdown:hover .dropbtn {
        background-color: #4e3f3f;
    }

.dropdown-content {
    overflow: hidden;
    display: none;
    position: absolute;
    background-color: #1f1d1d;
    box-shadow: 0px 8px 16px 0px rgb(186,179,179);
    z-index: 1;
    width: 216px;
}

    .dropdown-content a {
        float: none;
        color: antiquewhite;
        padding: 19px 0px 20px 0px;
        text-decoration: none; 
        display: block;
        text-align: center;
        width: inherit;
    }

        .dropdown-content a:hover {
            background-color: #4e3f3f;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

＆＃13;

<div class="navigation">
                  <div style="width:20%; float:left">
                <a href="~/Pages/Home.aspx" runat="server">Home</a>
                      </div>
                <div class="dropdown" style="width:20%; float:left">
                    <button class="dropbtn">&nbsp;&nbsp; Detalii<i class="fa fa-caret-down">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </i>
                    </button>
                    <div class="dropdown-content">
                        <a href="~/Pages/Cafea.aspx" runat="server">Sortimente</a>
                        <a href="#">Cafea cu lapte</a>
                    </div>
                </div>
                <div style="width:20%; float:left">
                <a href="~/Pages/Magazin.aspx" runat="server">Magazin</a>
                    </div>
                <div style="width:20%; float:left">
                <a href="#despre" runat="server">Despre</a>
                    </div>
                <div class="dropdown" style="width:20%; float:left">
                    <button class="dropbtn" id="A1" runat="server" visible="false">Administrator</button>
                    <div class="dropdown-content">
                        <a href="~/Pages/Cafea_Overview.aspx" runat="server">Management</a>
                        <a href="~/Pages/Cont/Admin.aspx" runat="server">Utilizatori</a>
                    </div>
                </div>
            </div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你也可以这样使用

＆＃13;

＆＃13;

    .navigation {
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        border: 0px solid #E3E3E3;
        background-color: #1f1d1d;
        font-family: Arial, Helvetica, sans-serif;
        width: 1080px;
    }

        .navigation a {
            float: left;
            font-size: 25px;
            color: antiquewhite;
            text-align: center;
            padding: 18px 20px;
            text-decoration: none;
            height: 25px;
            width: 174px;
        }

    .dropdown {
        float: left;
        overflow: hidden;
    }

        .dropdown .dropbtn {
            border-style: none;
            border-color: inherit;
            font-size: 25px;
            margin: 0px;
            outline: none;
            color: antiquewhite;
            padding: 16px 20px;
            background-color: inherit;
            font-family: inherit;
            width: 216px;
        }

        .navigation a:hover, .dropdown:hover .dropbtn {
            background-color: #4e3f3f;
        }

    .dropdown-content {
        overflow: hidden;
        
        display: none;
        position: absolute;
        background-color: #1f1d1d;
        box-shadow: 0px 8px 16px 0px rgb(186,179,179);
        z-index: 1;
        width: 216px;
    }

        .dropdown-content a {
            float: none;
            color: antiquewhite;
            padding: 20px 0px 20px 0px;
            text-decoration: none; 
            display: block;
            text-align: center;
            width: inherit;
        }

            .dropdown-content a:hover {
                background-color: #4e3f3f;
            }

    .dropdown:hover .dropdown-content {
        display: block;
    }

＆＃13;

   <div class="navigation">
                      <div style="width:20%; float:left">
                    <a href="~/Pages/Home.aspx" runat="server">Home</a>
                          </div>
                    <div class="dropdown" style="width:20%; float:left">
                        <button class="dropbtn">&nbsp;&nbsp; Detalii<i class="fa fa-caret-down">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </i>
                        </button>
                        <div class="dropdown-content">
                            <a href="~/Pages/Cafea.aspx" runat="server">Sortimente</a>
                            <a href="#">Cafea cu lapte</a>
                        </div>
                    </div>
                    <div style="width:20%; float:left">
                    <a href="~/Pages/Magazin.aspx" runat="server">Magazin</a>
                        </div>
                    <div style="width:20%; float:left">
                    <a href="#despre" runat="server">Despre</a>
                        </div>
                    <div class="dropdown" style="width:20%; float:left">
                        <button class="dropbtn" id="A1" runat="server" visible="false">Administrator</button>
                        <div class="dropdown-content">
                            <a href="~/Pages/Cafea_Overview.aspx" runat="server">Management</a>
                            <a href="~/Pages/Cont/Admin.aspx" runat="server">Utilizatori</a>
                        </div>
                    </div>
                </div>

＆＃13;

＆＃13;

＆＃13;