scss：并排显示按钮的按钮

Question

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

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

我用百分比来使它响应，但显然，我的杂志看起来有些问题。

对于一个例子，我希望前景如图所示，而不管屏幕大小是什么。

这是我顶嘴代码

.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; 
    } 
}