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