英文:
Div expands when input is added
问题
When adding a new input field, the width of the fields block increases each time.
How can I fix it without specifying the width for the fields block?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
setInterval(function() {
var input = '<input type="text">';
$("#fields").append(input);
}, 2000);
<!-- language: lang-css -->
body {
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
#fields {
background: green;
padding: 20px;
}
#fields input {
width: 100%;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fields">
<input type="text">
</div>
<!-- end snippet -->
英文:
When adding a new input field, the width of the fields block increases each time.
How can I fix it without specifying the width for the fields block?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
setInterval(function() {
var input = '<input type="text">';
$("#fields").append(input);
}, 2000);
<!-- language: lang-css -->
body {
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
#fields {
background: green;
padding: 20px;
}
#fields input {
width: 100%;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fields">
<input type="text">
</div>
<!-- end snippet -->
答案1
得分: 3
如果您不想修改input的width，您可以将#fields容器的flex属性设置为flex-direction: column;。
#fields {
display: flex;
flex-direction: column;
background: green;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fields">
<input type="text">
</div>
英文:
If you do not want to modify the width of input you can flex the #fields container and specify flex-direction: column;.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
setInterval(function() {
var input = '<input type="text">';
$("#fields").append(input);
}, 2000);
<!-- language: lang-css -->
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%;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fields">
<input type="text">
</div>
<!-- end snippet -->
答案2
得分: 0
使用display: block替代width: 100%：
#fields input {
display: block;
}
英文:
Use display: block instead width: 100%:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
setInterval(function() {
var input = '<input type="text">';
$("#fields").append(input);
}, 2000);
<!-- language: lang-css -->
body {
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
#fields {
background: green;
padding: 20px;
}
#fields input {
display: block;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fields">
<input type="text">
</div>
<!-- end snippet -->
答案3
得分: 0
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
setInterval(function() {
var input = ''<input type="text">';
$("#fields").append("<br>"+input);
}, 2000);
<!-- 语言: lang-css -->
body {
background: 灰色;
}
#fields {
background: 绿色;
padding: 20px;
text-align:center;
}
#container{
width:60%;
border:solid 2px 绿色;
margin:0 auto;
}
<!-- 语言: lang-html -->
<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>
<!-- 结束代码片段 -->
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
setInterval(function() {
var input = '<input type="text">';
$("#fields").append("<br>"+input);
}, 2000);
<!-- language: lang-css -->
body {
background: grey;
}
#fields {
background: green;
padding: 20px;
text-align:center;
}
#container{
width:60%;
border:solid 2px green;
margin:0 auto;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论