0
我在調試此問題時遇到困難。我需要我的按鈕都是水平觸摸和堆疊。在桌面瀏覽器,我得到類似如下的內容:僅在移動瀏覽器上按鈕之間的額外間距
#aWrapper {
display: flex;
}
.buttons {
border: 1px solid black;
display: block;
}
<div id="aWrapper">
<button class="buttons">Button 1</button>
<button class="buttons">Button 2</button>
</div>
這就是我想要的!但在iOS上的移動瀏覽器(Chrome瀏覽器,Safari瀏覽器,Opera Mini的,和Firefox)我得到這樣的結果完全相同的代碼(我加的目的保證金說明):
#aWrapper {
display: flex;
}
.buttons {
border: 1px solid black;
display: block;
margin-right: 4px; /*IGNORE THIS*/
}
<div id="aWrapper">
<button class="buttons">Button 1</button>
<button class="buttons">Button 2</button>
</div>
這是爲什麼發生?我從其他答案中看到,白色空間可能是一個問題,但它不是這種情況。
這裏是CodePen顯示這在行動。在桌面瀏覽器中打開它,然後使用任何瀏覽器在iOS設備上打開它。移動瀏覽器中的按鈕之間應該有額外的間距,並且它們應該在桌面瀏覽器中觸摸。
注意:我標記爲正確的答案工作正常,但display: flex
也適用於包裝,我只是沒有正確導入我的CSS規範化文件,導致這種不必要的頭痛。
這似乎並沒有在桌面上工作。按鈕之間有間距,我希望他們能夠觸摸。 – Pearu
我的壞..改變'按鈕'爲'.buttons'在CSS代碼+添加演示鏈接供參考 – Rahul
謝謝你,你的解決方案。但爲什麼? – Pearu