Medien Abfrage für HTML-Button

Question

Hallo Ich möchte sowohl die Schaltfläche horizontal in der gleichen Zeile im Medien-Bildschirm ausrichten. Bitte helfen Sie mir mit CSS. Folgendes ist der Code, den ich versuche.

<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

Diese CSS arbeiten unter 768px.

Mit dieser Geige here

hat dieses Bild CSS:

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

Answer 2

Ich glaube, Sie display:flex in .ctext-wrap und justify-content: space-between; verwenden müssen.

Ich werde machen, was Sie wollen, ohne Medienabfrage zu verwenden.

.ctext-wrap { 
    display: flex; 
    justify-content: space-between; 
    margin: 0 auto; 
    max-width: 50%; 
    text-align: left; 
} 

Working Fiddle