Question

我已经定义了两个链接并使它们看起来像使用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;}

Answer 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>

我刚加了六次。

Answer 2

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

放置“继续”＆amp;两个独立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;
    }
}

按照今天的趋势首先移动

CSS定义的按钮在移动设备上发生冲突

2 个答案: