scss：按钮显示并排固定

Question

最近，我在手机应用程序中添加了一个按钮。但是，按钮在移动屏幕尺寸上的显示方式不同。

例如，当我在iphone 6+上运行时，按钮并排显示如下图所示，但当我在iphone 4上显示时，第二个按钮显示在它下面而不是旁边。

我使用百分比使其反应灵敏，但显然，我的sass看起来有些不对劲。

例如，我希望无论屏幕大小是什么，外观都会如图所示。

这是我的sass代码

.IonFooter {
        button {
            width: 48%;
            height: 60px;
            border-radius: 5px;
            font-size: 1.3em;
        }
}

提前谢谢

Answer 1

按钮的行为可能是由臭名昭着的display: inline-block;右边距“错误”造成的（请查看此问题CSS Tricks article）。它也可能是由父元素中的填充引起的。

无论如何，我建议您使用flex来避免按钮落在多行上。

.IonFooter {
    display: flex;
    justify-content: space-between;

    button {
        flex: 0 0 48%; // Grow: no, shrink: no, width: 48 %
        height: 60px;
        border-radius: 5px;
        font-size: 1.3em;
    }
}