Div添加內容後不適合父母

我的問題是與子div。我有代碼：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/

來源

2016-01-17 Karol Jankiewicz

max-height：auto; ??溢出-γ：內容; ?? –

我已經編輯你的小提琴不僅要達到預期的效果，而且要清理你的代碼。除了使用inline或inline-block，我漂浮一切在#menu向左與

#menu *{ 
    float: left; 
}

浮動，停止從有空格和線空間的每一個元素。除此之外，我已經刪除了span和一些不必要的標記。

這是Fiddle。

希望這會有幫助

來源

2016-01-17 21:59:16

上.menulist使用vertical-align: top;解決這個問題：https://jsfiddle.net/wd3tjgk8/5/

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

爲什麼？ display: inline-block;將它置於中間位置，如果沒有設置頂部;）

來源

2016-01-17 21:42:24 CoderPi

Div添加內容後不適合父母

回答

相關問題