入力とボタンで均等にdivを入力してください

Question

2つの入力を持つdivがあります。 1つのテキストボックスと1つのボタン。 divを特定の幅（例えば30em）に設定し、テキストボックスに80％、ボタンに20％を入力させたいと思います。入力は並んでいる必要があります。 divはページの中央に配置されます。

<div class="container"> 
    <input class="input" type="text" placeholder="Some text"> 
    <input class="button" type="submit"> 
</div> 

私はこれまで

.container { 
    margin-left: auto; 
    margin-right: auto; 
    width: 30em; 
    .input { 
    width: 80%; 
    } 
    .button { 
    width: 20%; 
    } 
} 

このSCSSを持っているこれまでのところ、テキストボックスには80％を占めるが、中央とその下のボタンに浮かびます。どのように私はdivを埋めるためにそれらを並べて整列させることができますか？

Answer 1

これらの要素はデフォルトでインラインになっているため、それらの間の空白は保持され、全体の幅は20％+ 80％+ [スペース]、つまり100％を超えます。

することができます...

• は親
• フロート入力に使用display: flex
• それらの間の空白を削除します。

* {margin:0;padding:0;box-sizing:border-box;} 
 
.container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 30em; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.input { 
 
    width: 80%; 
 
} 
 

 
.button { 
 
    width: 20%; 
 
} 
 

 
.float { 
 
    overflow: auto; 
 
} 
 

 
.float input { 
 
    float: left; 
 
}

<div class="container"> 
 
    <input class="input" type="text" placeholder="Some text"><input class="button" type="submit"> 
 
</div> 
 

 
<div class="container flex"> 
 
    <input class="input" type="text" placeholder="Some text"> 
 
    <input class="button" type="submit"> 
 
</div> 
 

 
<div class="container float"> 
 
    <input class="input" type="text" placeholder="Some text"> 
 
    <input class="button" type="submit"> 
 
</div>