英文:
Input element not working with flex property
问题
因某种原因，<input type="text"/> 无法与 flex: 1; 一起使用。
顺便说一下，我使用的是 Svelte，但我认为这并不重要。
<main>
<section>
<span>姓名：</span>
<input type="text" bind:value={...} />
<span>年龄：</span>
<input type="text" bind:value={...} />
</section>
</main>
<style>
main {
width: 50vw;
padding: 1rem;
}
section {
display: flex;
gap: 1rem;
}
input {
flex: 1; /* 无法正常工作 😥😭🥵🤢🤮 */
}
</style>
应该适应容器，但实际上像佛罗里达五级飓风后的2厘米防洪堤一样溢出。
英文:
for some reason <input type="text"/> wont work with flex: 1;
using svelte btw but I dont think it matters
<main>
<section>
<span>Name:</span>
<input type="text" bind:value={...} />
<span>Age:</span>
<input type="text" bind:value={...} />
</section>
</main>
<style>
main {
width: 50vw;
padding: 1rem;
}
section {
display: flex;
gap: 1rem;
}
input {
flex: 1; /* doesnt work 😥😭🥵🤢🤮 */
}
</style>
supposed to fit in container but instead just overflows like a 2cm flood barrier in florida after a categore 5 hurricane
答案1
得分: 1
HTML输入元素有默认宽度。要覆盖它，请尝试以下操作：
input {
flex-grow: 1;
width: 0;
max-width: // 您喜欢的最大宽度
}
将flex-grow设置为1并将width设置为0将使其填充父容器。max-width将限制其大小。
英文:
HTML input elements have a default width. To override it, try the following:
input {
flex-grow: 1;
width: 0;
max-width: // your preferred max width
}
Setting flex-grow to 1 and width to 0 will cause it to fill the parent container. max-width will limit its size.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论