兩個按鈕移動網站之間的空間

Question

我的網站打開移動版時，按鈕有問題

HTML是：

<p style="text-align: right;">
<a class="button btn-primary" href="index.php/reprogrammation/193-bmw"> Retour "Choix de la marque" </a>
</p>

<p style="text-align: center;">
<a class="button btn-primary" href="#">2005 - E8x</a>     
<a class="button btn-primary" href="#">2007 - E8x</a>  
<a class="button btn-primary" href="#">2011 - F2x</a>
</p>

<p><img style="float: right;" src="images/marques/bmw/serie1.png" alt="" width="400" height="150" /></p>

CSS是：

.btn-primary {
    background: transparent none repeat scroll 0% 0%;
    border: 2px solid #C01C32;
    border-radius: 20px;
    font-family: "Montserrat",sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    padding: 8px 24px;

這是兩個屏幕截圖：

電腦版本

手機版

誰能告訴我如何在此按鈕之間放置空格

Answer 1

.btn-primary {
    background: transparent none repeat scroll 0% 0%;
    border: 2px solid #C01C32;
    border-radius: 20px;
    font-family: "Montserrat",sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    display: inline-block;
    margin:10px;
    padding: 8px 24px;
}

我建議使用顯示內聯塊來實現所需的效果，並根據喜好進行調整。

Answer 2

感謝inline-block和margin：5px