Div在添加输入时展开

Question

添加新的输入字段时，字段块的宽度每次都会增加。如何在不指定字段块宽度的情况下修复它？

setInterval(function() {
var input = '<input type="text">';
$("#fields").append(input);
}, 2000);

body {
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
#fields {
background: green;
padding: 20px;
}
#fields input {
width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fields">
<input type="text">
</div>

Answer 1

如果不想修改input的width，可以flex#fields容器并指定flex-direction: column;。

setInterval(function() {
var input = '<input type="text">';
$("#fields").append(input);
}, 2000);

body {
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
#fields {
display: flex;
flex-direction: column;
background: green;
padding: 20px;
}
#fields input {
width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fields">
<input type="text">
</div>

Answer 2

使用display: block代替width: 100%:

setInterval(function() {
var input = '<input type="text">';
$("#fields").append(input);
}, 2000);

body {
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
#fields {
background: green;
padding: 20px;
}
#fields input {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fields">
<input type="text">
</div>

Answer 3

setInterval(function() {
var input = '<input type="text">';
$("#fields").append("<br>"+input);
}, 2000);

body {
background: grey;  
}
#fields {
background: green;
padding: 20px;  
text-align:center;
}

#container{
width:60%;
border:solid 2px green;
margin:0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='container'>
<div id="fields">
<input type="text">
</div>
</div>