如何让输入文本框自适应父容器宽度？

你的代码同时混用了flex布局与float/clear规则，这是导致布局混乱的核心原因——flex布局本身就能实现元素的弹性空间分配，完全不需要依赖float和清除浮动的手段。以下是具体修复方案：

修复步骤 #

• 移除.form-label和.form-field的float:left样式，同时删掉HTML中所有<div class="clear"></div>元素
• 给.form-label添加flex-shrink: 0，确保标签不会被压缩，维持设置的最小宽度
• 给.form-field设置flex: 1，让它自动占据容器的剩余可用空间
• 统一所有表单控件的box-sizing属性，避免内边距、边框撑开元素尺寸

修改后的完整代码 #

CSS #

.form-label {
    cursor: pointer;
    padding: 10px 8px 0px 8px;
    min-width: 60px;
    text-align: right;
    flex-shrink: 0; /* 防止标签被压缩 */
}

.form-row {
    display: flex;
    margin-bottom: 4px;
    background-color: #000000;
    align-items: center; /* 让控件垂直居中对齐 */
}
    
.form-field {
    flex: 1; /* 自动占据剩余空间 */
    padding: 0 8px; /* 可选：添加内边距优化间距 */
}

.form-field input,
.form-field select {
    box-sizing: border-box;
    height: 36px;
}

.form-field input {
    width: 100%; /* 输入框撑满父容器 */
}

.form-field select {
    width: auto; /* 下拉框根据内容自适应宽度 */
    margin-right: 6px;
}

HTML #

<div class="form-row">
    <div class="form-label">
        <label for="label">Label:</label>
    </div>
    <div class="form-field">
        <input type="text" name="label" id="label" value="" />
    </div>
</div>
<div class="form-row">
    <div class="form-label">
        <label for="radius">Radius:</label>
    </div>
    <div class="form-field">
        <select name="unit_for_radius" id="unit_for_radius">
            <option value="CM">Centimeter</option>
        </select>
    </div>
    <div class="form-field">
        <input type="number" name="radius" id="radius" value="" required pattern="\d+" />
    </div>
</div>

效果对比 #

当前效果 #

期望效果 #

修改后输入框会自动拉伸填满剩余空间，下拉框保持自适应宽度，整个布局不会出现超出容器的问题，完全匹配你的期望效果。

内容的提问来源于stack exchange，提问作者tonic3k