Block Element Not Responsive

Question

我連續顯示五個方形按鈕，並顯示爲一個鎖。但是，當在手機上觀看時，5個圖標不會堆疊，它們會聚集在一起並與其下方的元素重疊。我認爲添加明確的元素將解決，但它不。任何人都可以將我指向正確的方向嗎？

非常感謝，我非常感謝！

.menu { 
    height: 100px; 
    clear: both; 
    width:100%; 
    margin-bottom:40px; 
    margin-top:35px; 
} 

.icons { 
    height: 100px; 
    width:100px; 
    display: inline-block; 
    margin-left:10px; 
    margin-right:10px; 
    margin-bottom:10px; 
    background-color:#ffffff; 
} 

Answer 1

卸下height財產從.menu類（或者，至少是，將其更改爲min-height）將讓您的父元素的高度擴展，以適應其內容，從而推動內容它在頁面之後。

請參閱下面的示例以獲得舉例說明。

div{ 
 
    background:green; 
 
    margin:5px 0; 
 
    padding:5px; 
 
} 
 
p{ 
 
    font-family:sans-serif; 
 
    margin:0; 
 
} 
 
div p{ 
 
    background:red; 
 
    min-height:40px; 
 
} 
 
div~div{ 
 
    height:20px; 
 
}

<div> 
 
    <p>This paragraph's parent doesn't have set height and therefore will expand to fit the height of this paragraph</p> 
 
</div> 
 
<p>This is just a placeholder</p> 
 
<div> 
 
    <p>This paragraph's parent has a set height and therefore won't expand to fit the height of this paragraph</p> 
 
</div> 
 
<p>This is just a placeholder</p>