为什么我不能调整按钮宽度的大小并将它们并排放置在@media中

Question

我在主页上有两个按钮。

正确的选择器是

.btn

我只希望这两个并排放置，并且较小，以便移动查看。

尝试：

@media (max-width: 400px) {
    .btn {
        display: inline-block; 
        height: 10px; 
        width: 10px;
    }
} 

高度改变了，什么也没做，按钮在同一位置彼此重叠。

尝试：

@media (max-width: 400px) {
    .btn {
        display: block; 
        float: left; 
        height: 10px; 
        width: 10px;
    }
} 

按钮的高度降低到一半，宽度保持不变，而不是并排放置，而是彼此重叠。

尝试使用以下相同的代码

@media screen and 

没事

实时网址：https://adsler.co.uk/

Answer 1

使用实时网址更新了问题。

这应该是您想要的。

@media (max-width: 400px) {
    .btn { 
        display: inline-block; 
        height: 28px; 
        font-size: 12px; 
        width: 151px; 
        min-width: 80px; 
        padding: 0; 
    }
}