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>