html - 添加内容后 Div 不适合父级

Question

我的问题是子 div。 我有代码:

<div id="menu" class="menu">
<div class="logo"></div>

<div class="menulist">

<span><a href="#first">First</a></span>
<span><a href="#second">Second</a></span>
<span><a href="#third">Third</a></span>
<span><a href="#fourth">Fourth</a></span>

</div>
</div>

CSS:

#menu{
width:100%;
z-index:998;
height:64px;
max-height:auto;
overflow-y:content;
position:fixed;
background-color: rgba(0, 0, 0, 0.63);
box-shadow:0px 0px 5px black;

}

.logo{

height:100%;
width:70px;
background-color:red;
display:inline-block;

}

.menulist{
display:flex;
height:100%;
width:70vw;
background-color:red;
display:inline-block;
}



.menulist span a{
font-family: Segoe UI Light;
padding:0px;
margin:-50px;
position:relative;
height:32px;
font-size:30px;
display:inline;
margin-left:auto;
margin-right:auto;
}

.menulist div 上没有任何内容，此 div 适合 #menu，但在添加一些 span 后，他不在 #menu(下)中。你能解释一下为什么吗？ 这是 Jsfiddle 元素: https://jsfiddle.net/wd3tjgk8/3/

Answer 1

我编辑了您的 Fiddle，不仅是为了达到预期的效果，也是为了稍微清理一下您的代码。我没有使用inline 或inline-block，而是将#menu 中的everything float 到左侧

#menu *{
    float: left;
}

通过 float ，您可以阻止每个元素具有空白和行距。除此之外，我还删除了 span 和一些不必要的标记。

这是 Fiddle .

希望对你有帮助