Positionsknopf nebeneinander

Question

Ich möchte meine Zurück und Bestätigen-Taste nebeneinander anzeigen. Wie Sie sehen können, habe ich versucht, display: inline-block, aber es hat nicht funktioniert. Ich denke, es könnte widersprüchliche Codes geben, aber ich bin mir nicht sicher, wo es ist. Das könnte eine dumme Frage sein, aber bitte, bitte.

Hier ist mein Code:

.form__confirmation { 
 
    padding: 0px 55px; 
 
} 
 

 
.form__confirmation2 { 
 
    padding: 0px 55px; 
 
} 
 

 
button { 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
    letter-spacing: 1px; 
 
    background-color: #011f4b; 
 
    border: 1px solid #DADDE8; 
 
    color: #fff; 
 
    padding: 18px; 
 
    border-radius: 5px; 
 
    outline: none; 
 
    -webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
 
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
 
    position: relative; 
 
    left: 350px; 
 
    margin-bottom: 20px; 
 
    display: inline-block; 
 
} 
 

 
button:hover { 
 
    background-color: #1293e1; 
 
} 
 

 
button:active { 
 
    background-color: #1083c8; 
 
}

<div class="form__confirmation" type="submit" name="submit"> 
 
    <button>Confirm Information</button> 
 
</div> 
 
<div class="form__confirmation2"> 
 
    <button>Back</button> 
 
</div>

Answer 1

.form__confirmation,.form__confirmation2 { 
 
     display: inline-block; 
 
\t \t }

<div class="form__confirmation" type="submit" name="submit"> 
 
    <button>Confirm Information</button> 
 
</div> 
 
<div class="form__confirmation2"> 
 
    <button>Back</button> 
 
</div>

Du sie innerhalbplatzierenElemente, die standardmäßig display:block sind. Enthalten Sie beide Tasten innerhalb derselben div oder verwenden Sie div{display:inline-block}.

Answer 2

Sie müssen Anzeige anwenden: Inline-Block; zu Ihrem Container Wie so:

.form__confirmation { 
 
\t \t padding: 0px 55px; 
 
     display: inline-block; 
 
\t \t } 
 
\t \t 
 
\t \t .form__confirmation2 { 
 
\t \t padding: 0px 55px; 
 
     display: inline-block; 
 
\t \t } 
 

 
\t \t button { 
 
\t \t font-size: 12px; 
 
\t \t text-transform: uppercase; 
 
\t \t font-weight: 700; 
 
\t \t letter-spacing: 1px; 
 
\t \t background-color: #011f4b; 
 
\t \t border: 1px solid #DADDE8; 
 
\t \t color: #fff; 
 
\t \t padding: 18px; 
 
\t \t border-radius: 5px; 
 
\t \t outline: none; 
 
\t \t -webkit-transition: background-color 0.2s cubic-bezier(0.4,  0, 0.2, 1); 
 
\t \t transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2,  1); 
 
\t \t position: relative; 
 
\t \t left: 350px; 
 
\t \t margin-bottom: 20px; 
 
\t \t display: inline-block; 
 
\t \t } 
 
\t \t button:hover { 
 
\t \t background-color: #1293e1; 
 
\t \t } 
 
\t \t button:active { 
 
\t \t background-color: #1083c8; 
 
\t \t }

<div class="form__confirmation" type="submit" name="submit"> 
 
    <button>Confirm Information</button> 
 
</div> 
 
<div class="form__confirmation2"> 
 
    <button>Back</button> 
 
</div>