2017-05-10 20 views
0

2つの入力を持つdivがあります。 1つのテキストボックスと1つのボタン。 divを特定の幅(例えば30em)に設定し、テキストボックスに80%、ボタンに20%を入力させたいと思います。入力は並んでいる必要があります。 divはページの中央に配置されます。入力とボタンで均等に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を埋めるためにそれらを並べて整列させることができますか?

答えて

2

これらの要素はデフォルトでインラインになっているため、それらの間の空白は保持され、全体の幅は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>

関連する問題