css 输入元素无法使用flex属性

lbsnaicq 于 2023-01-10 发布在其他

关注(0)|答案(1)|浏览(144)

由于某种原因，<input type="text"/>无法与flex: 1;一起工作
使用svelte顺便说一句，但我不认为这有什么关系

<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>

本应装进容器，但却像佛罗里达州5级飓风后的2厘米防洪堤一样溢出

css

来源：https://stackoverflow.com/questions/75052360/input-element-not-working-with-flex-property

1条答案

按热度按时间

8zzbczxx1#

HTML输入元素具有默认宽度。要覆盖它，请尝试以下操作：

input {
    flex-grow: 1;
    width: 0;
    max-width: // your preferred max width
}

将flex-grow设置为1，将width设置为0将导致它填充父容器。max-width将限制它的大小。

赞(0）回复(0）举报 2023-01-10

我来回答

css 输入元素无法使用flex属性

1条答案

相关问题

热门标签

最新问答