用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

Flexbox，就可以做到這一點。

* { 
 
    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; 
}