html - html按钮的媒体查询

Question

您好，我想将两个按钮水平对齐在媒体屏幕的同一行上。请帮我处理CSS。以下是我正在尝试的代码。

    <div class="ctext-wrap">
      <button type="button" class="btn offert-btn btn-next">Mer information<br></button>
      <button type="button" class="btn btn-previous offert-btn">Föregående<br></button>
    </div>

    .ctext-wrap {
        max-width: 100%;
    }
    .ctext-wrap {
        max-width: 50%;
        margin: 0px auto;
        text-align: left;
    }


    .btn-next {
        float: right;
        min-width: 130px;
    }

    .offert-btn {
        display: inline-block;
        background: #213156 !important;
        color: #fff !important;
        font-weight: bold !important;
        text-decoration: none !important;
        margin-bottom: 20px !important;
        border-radius: 0 !important;
    }

@media screen and (max-width: 768px)
.ctext-wrap {
    max-width: 100%;
}

Answer 1

此 CSS 在 768px 以下有效。

使用这个 fiddle here

添加了这个 CSS:

@media screen and (max-width: 768px) {
.ctext-wrap .btn {
    display: block;
    width: auto;
    float: none;
}