CSS 定义的按钮在移动设备上发生碰撞答案

【问题标题】：CSS defined buttons collide on mobile devicesCSS 定义的按钮在移动设备上发生碰撞
【发布时间】：2018-02-27 17:55:44
【问题描述】：

我定义了两个链接，并使用 css 样式使它们看起来像按钮。

HTML 代码如下所示：

<h2 style="text-align: center;"><strong>Continue to&nbsp; &nbsp;&nbsp;</strong>&nbsp;<a class="btn-white" href="/?page_id=137531"><strong>Accessories</strong></a> <a class="btn-red" href=""><strong>BUY</strong></a></h2>

它应该是什么样子

但在移动设备上，这两个按钮会发生冲突。

错误的移动设备外观

是否可以使用 css 为它们设置样式，以正确显示而不会发生冲突？

btn-red 类示例在这里：

.btn-red {
        font-size: 20px;
        font-weight: 500;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        padding: 8px 40px;
        line-height: 1.7em;
        background: transparent;
        border: 2px solid;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -moz-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        position: relative;}
a.btn-red {
    background-color: #dd0000; /* change background color here */
        border: 2px solid transparent;
        color: #fff!important; /* change font color here */
    font-weight: bold;}
a.btn-red:hover {
    background: #dd0000; /* change background color on hover here */
        border: 2px solid transparent;
        padding: 8px 54px 8px 40px !important;}
a.btn-red:after {
    font-family: 'ETmodules';
        font-size: 32px;
        opacity: 0;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 32px;
        line-height: 1em;
        content: "\35";
        position: absolute;
        margin-left: -1em;
        -moz-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;}
a.btn-red:hover:after {
    opacity:1;
    display: block!important;
        font-family: 'ETmodules';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        right: 0px;
        top: 5px;
    margin-left: 0;}

编辑：我尝试使用响应来填充，这应该足以解决我的问题，但它没有按预期工作。究竟是什么问题？代码包含在 btn-red 类中。

代码在这里：

@media only screen and (min-width : 1024px){ padding: 8px 40px;}
@media only screen and (max-device-width : 320px) {padding: 2px 10px;}

【问题讨论】：

使用媒体查询来响应。
这看起来是一个简单的可用空间不足的问题，因此这些元素自然会在某个时候进入“下一行”。 “是否可以使用 css 为它们设置样式，以正确显示而不发生冲突？” - 让它们更小，或提供更多空间......？
媒体查询参考这里stackoverflow.com/a/35605310/5383669
媒体查询是答案，但需要更多帮助

标签： html css

【解决方案1】：

我认为这可能有效。但是，我不确定。

<h2 style="text-align: center;"><strong>Continue to&nbsp; &nbsp;&nbsp;</strong>&nbsp;<a class="btn-white" href="/?page_id=137531"><strong>Accessories</strong></a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <a class="btn-red" href=""><strong>BUY</strong></a></h2>

我刚刚添加了六次。

【讨论】：

【解决方案2】：

你可以这样做......

将“继续”和按钮放在两个单独的 div 元素中。

HTML：

<div class="display-ib">Continue to</div>
<div class="display-ib">
    <button class="btn1"></button>
    <button class="btn2"></button>
</div>

CSS：

.display-ib {
    display: block;
}
@media (min-width: 768px) {
    .display-ib {
        display: inline-block;
    }
}

按照当今的趋势，移动优先

【讨论】：