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，但是在添加了一些范围后，他不会在#menu（更低）中。你能解释一下为什么吗？这是Jsfiddle的项目： https://jsfiddle.net/wd3tjgk8/3/

Answer 1

我编辑了你的小提琴不仅是为了达到预期的效果，而且还要清理你的代码。我没有使用inline或inline-block，而是使用

将#menu中的所有内容浮动到左侧

#menu *{
    float: left;
}

通过浮动，可以阻止每个元素具有空白和行空间。除此之外，我已经删除了span和一些不必要的标记。

这里是Fiddle。

希望这有帮助

Answer 2

使用vertical-align: top;上的.menulist来解决此问题：https://jsfiddle.net/wd3tjgk8/5/

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

为什么呢？如果没有设置为顶部，display: inline-block;会将其定位在中间;）

添加内容后，Div不适合父母

2 个答案: