Question

我是css的新手，并且整个上午一直在努力解决我的代码的以下问题。如果有人能帮助我找出原因，我将非常感激。

如果我没有将“ul.navBar”的“溢出”设置为“隐藏”，为什么导航栏会从页面中完全消失？

<html>
<head>
<style>
    ul.navBar {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: #4277f4;
        cursor: pointer;
    }

    li {
        float: left;
    }

    li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 20px;
        text-decoration: none;
    }

    li:hover {
        background-color: #A2AEB3;
    }

    .dropDownContent {
        display: none;
        position: absolute;
        background-color: #7DC9E3;
        width: 150px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        text-decoration: none;

    }
    .dropDownContent a {
        color: white;
        display: block;

    }
    .dropDownContent a:hover{
        background-color: #4A96B0;
    }


    li.dropDownBtn:hover .dropDownContent{
        display: block;
    }

</style>
</head>

<body>
    <ul class="navBar">
    <li><a href="#">Home</a></li>
    <li class="dropDownBtn"><a href="#">Products</a>
        <div class="dropDownContent">
            <a href="#">Product1</a>
            <a href="#">Product2</a>
            <a href="#">Product3</a>
        </div>
    </li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
</body>
</html>

以下是此navigation bar的代码页。

Answer 1

如果我没有将overflow ul.navBar设置为hidden，为什么导航栏会从页面中完全消失？

这种情况正在发生，因为.navBar的子元素正在浮动。浮动元素从正常文档流中取出，不占用空间。因为孩子不占用空间.navBar没有高度。

添加overflow: hidden;会触发新的块格式设置上下文，以阻止{em>＆＃34;崩溃＆＃34; 的.navBar。

有些人会建议使用display: inline-block;。请谨慎使用，因为每个元素周围都会有空白区域，这会使它们比您想象的更大。特别是在使用百分比宽度时。

示例：

＆＃13;

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  width: 33.3333%;
}

.inline li {
  display: inline-block;
  background-color: gold;
}

.float li {
  float: left;
  background-color: indianred;
}

.flex {
  clear: left;
  display: flex;
  background-color: skyblue;
}

＆＃13;

<ul class="inline">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="float">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="flex">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

＆＃13;

如果您选择inline-block路线，请how to handle the white space上的一些选项。

Answer 2

浮动元素（在这种情况下，您的li）的高度为0.因此，基本上，您的ul元素的高度为0像素。

将display: inline-block添加到li元素可以更正此问题。因此，overflow的{{1}}样式不是必需的。

＆＃13;

ul

＆＃13;

ul.navBar {
    list-style-type: none;
    margin: 0px;
    padding:0px;
    background-color: #4277f4;
    cursor: pointer;
}

li {
    display:inline-block;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    text-decoration: none;
}

li:hover {
    background-color: #A2AEB3;
}

.dropDownContent {
    display: none;
    position: absolute;
    background-color: #7DC9E3;
    width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-decoration: none;
    
}
.dropDownContent a {
    color: white;
    display: block;

}
.dropDownContent a:hover{
    background-color: #4A96B0;
}


li.dropDownBtn:hover .dropDownContent{
    display: block;
}

＆＃13;

Answer 3

问题是，您正在浮动导致li没有高度的ul元素。请尝试使用display:inline-block;。

＆＃13;

ul.navBar {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: #4277f4;
    cursor: pointer;
}

li {
    display:inline-block;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    text-decoration: none;
}

li:hover {
    background-color: #A2AEB3;
}

.dropDownContent {
    display: none;
    position: absolute;
    background-color: #7DC9E3;
    width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-decoration: none;

}
.dropDownContent a {
    color: white;
    display: block;

}
.dropDownContent a:hover{
    background-color: #4A96B0;
}


li.dropDownBtn:hover .dropDownContent{
    display: block;
}

＆＃13;

<ul class="navBar">
<li><a href="#">Home</a></li>
<li class="dropDownBtn"><a href="#">Products</a>
    <div class="dropDownContent">
        <a href="#">Product1</a>
        <a href="#">Product2</a>
        <a href="#">Product3</a>
    </div>
</li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>

＆＃13;

为什么我必须添加“overflow：hidden”才能在页面上显示导航栏？

3 个答案: