HTML5番号フィールドを含むdivの幅を入力してください

Question

私はHTML5番号フィールドと送信ボタンを持つフォームを持っています。フォームのコンテナの残りの部分を埋めるために、送信ボタンを自然な幅にしたいと思います。私のコードはこのように見えます。

<div class="form"> 
    <div class="input"> 
    <input type="number" name="test"> 
    </div> 
    <div class="submit"> 
    <input type="submit" value="Search"> 
    </div> 
</div> 

CSS

.form { 
    overflow: hidden; 
    padding: 10px; 
    background: lightblue; 
} 

input { 
    padding: 14px; 
} 

input[type="number"] { 
    width: 100%; 
} 

.input { 
    float: left; 
    padding: 14px; 
} 

.submit { 
    float: left; 
    padding: 11px 0; 
} 

私の問題はinput[type="number"]上の流体の幅を設定しているようです。

例：https://jsfiddle.net/ca4pkjxm/2/

Answer 1

フレキシボックスはそれを行うことができます。

* { 
 
    font-family: sans-serif; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#phone-280 { 
 
    width: 280px; 
 
    border: 1px solid gray; 
 
    margin: 0 auto; 
 
    margin-bottom: 50px; 
 
} 
 
#phone-400 { 
 
    width: 400px; 
 
    border: 1px solid gray; 
 
    margin: 0 auto; 
 
} 
 
.form { 
 
    width: 100%; 
 
    padding: 10px; 
 
    background: lightblue; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
input { 
 
    padding: 14px; 
 
    width: 100%; 
 
} 
 
input[type="number"] { 
 
    width: 100%; 
 
} 
 
.input { 
 
    padding: 14px; 
 
    flex: 1; 
 
} 
 
.submit { 
 
    padding: 11px 0; 
 
}

<div id="phone-280"> 
 
    <div class="form"> 
 
    <div class="input"> 
 
     <input type="number" name="test"> 
 
    </div> 
 
    <div class="submit"> 
 
     <input type="submit" value="Search"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="phone-400"> 
 
    <div class="form"> 
 
    <div class="input"> 
 
     <input type="number" name="test"> 
 
    </div> 
 
    <div class="submit"> 
 
     <input type="submit" value="Search"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたは山車を削除し、display:inline-blockを持つように入力し、送信ボタンの両方を設定することができます。それらを整列させて、inputブロックの幅を好みに合わせて設定します。

次のフィドルでは、このメソッドでは、下の入力要素のみを固定しました。

https://jsfiddle.net/ca4pkjxm/3/

* { 
    font-family: sans-serif; 
} 

#phone-280 { 
    width: 300px; 
    border: 1px solid gray; 
    margin: 0 auto; 
    margin-bottom: 50px; 
} 

#phone-600 { 
    width: 600px; 
    border: 1px solid gray; 
    margin: 0 auto; 
} 

.form { 
    overflow: hidden; 
    padding: 10px; 
    background: lightblue; 
} 

input { 
    padding: 14px; 
} 

input[type="number"] { 
    width: 420px; 
} 

.input { 
    padding: 14px; 
} 

.submit { 
    padding: 11px 0; 
} 

.input,.submit{ 
    display:inline-block; 
    vertical-align:middle; 
}