隣の位置ボタン

Question

「戻る」と「確認」ボタンを隣り合わせて表示します。ご覧のとおり、私はディスプレイを実行しようとしました：インラインブロックですが、動作しませんでした。私はいくつかの矛盾するコードがあるかもしれないと思うが、私はそれがどこであるかわからない。これはばかな質問かもしれませんが、私と一緒にしてください。ここで

は私のコードです：

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

あなたがの中にそれらを置いています要素は、デフォルトでdisplay:blockです。両方のボタンを同じdivに含めるか、div{display:inline-block}を使用してください。

Answer 2

ディスプレイを適用する必要があります：インラインブロック。そのようなあなたのコンテナに：button` `の親要素のインラインblock`：

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