【问题标题】:Space between two buttons mobile site两个按钮移动网站之间的空间
【发布时间】:2015-11-01 19:59:24
【问题描述】:

当我的网站打开移动版本时,我的按钮出现问题

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;

这里有两张截图:

电脑版

手机版

谁能告诉我如何在这个按钮之间放置一个空格

【问题讨论】:

    标签: php html css button mobile


    【解决方案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;
    }
    

    我建议使用 display inline-block 来实现所需的效果,根据偏好进行调整。

    【讨论】:

      【解决方案2】:

      感谢 inline-block 和 margin:5px

      【讨论】:

      • 仅供参考,您应该写这样的东西作为对答案的评论;)很高兴提供帮助