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 미만에서 작동합니다.

사용이 바이올린 here

추가 된이 CSS :

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

Answer 2

난 당신이 .ctext-wrap 및 justify-content: space-between;에 display:flex을 사용할 필요가 있다고 생각합니다.

미디어 쿼리를 사용하지 않고 원하는대로 만들 것입니다.

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

Working Fiddle