如何用CSS实现文本输入框与内嵌标签的相对定位？

问题描述 #

我制作了一个带内嵌标签的输入框，其中“Coin Name”是标签，“Gold Coin”为输入框内容。当前输入框通过固定的padding-left值来让输入文本避开标签，但当标签因本地化等原因长度变化时，固定值会失效。希望实现输入文本自动从标签右侧开始，标签宽度变化时输入框能自动适配。

解决方案 #

完全可行，下面提供两种实现方案，可根据需求选择：

方案1：纯CSS视觉融合方案（无需JS，语义更清晰） #

该方案将标签与输入框视觉上融合为一体，标签宽度变化时输入框自动占据剩余空间，无需固定padding值。

修改后的Handlebars代码（结构可复用原有）：

<div class="flexrow">
    <div class="coin">
        <div class="wrapper-flex">
            <label for="coin-name-{{key}}" class="inline-label">{{localize "SFC.CoinConfigItem.Name"}}</label>
            <input type="text" name="coin-name-{{key}}" title="Coin" value="{{coin.name}}" class="coin-text-input" placeholder='{{localize "SFC.CoinConfigItem.Name"}}' data-dtype="String">
        </div>
        <div class="wrapper-flex">
            <label for="coin-shortname-{{key}}" class="inline-label">{{localize "SFC.CoinConfigItem.ShortName"}}</label>
            <input type="text" name="coin-shortname-{{key}}" title="Coin" value="{{coin.shortName}}" class="coin-text-input" placeholder='{{localize "SFC.CoinConfigItem.ShortName"}}' data-dtype="String">
        </div>
    </div>
</div>

对应的CSS代码：

#coin-config .wrapper-flex {
    display: flex;
    margin-bottom: 8px; /* 可选，增加输入框之间的间距 */
}

#coin-config .inline-label {
    flex-shrink: 0; /* 标签宽度随内容自适应，不被压缩 */
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 8px;
    font-size: small;
    border: 1px solid #ccc; /* 与输入框边框保持一致 */
    border-right: none; /* 去掉右侧边框，与输入框无缝连接 */
    border-radius: 4px 0 0 4px; /* 左侧圆角匹配输入框 */
    display: flex;
    align-items: center; /* 标签文字垂直居中 */
}

#coin-config .coin-text-input {
    flex: 1; /* 输入框占据剩余全部宽度 */
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 0 4px 4px 0; /* 右侧圆角匹配标签 */
    font-size: inherit;
}

/* 可选：输入框聚焦时同步高亮标签边框 */
#coin-config .coin-text-input:focus + .inline-label {
    border-color: #2196F3;
}

方案2：精确内嵌标签方案（少量JS，完全匹配原有视觉） #

如果需要严格保持标签内嵌在输入框内部的视觉效果，可通过JS动态计算标签宽度，设置输入框的padding-left。

Handlebars代码可保持原有结构不变，修改CSS并添加JS：

修改后的CSS：

#coin-config .wrapper-rel {
    position: relative;
    margin-bottom: 8px;
    width: 100%;
}

#coin-config .inset-label {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 8px;
    font-size: small;
    white-space: nowrap; /* 强制标签不换行 */
    display: flex;
    align-items: center; /* 标签文字垂直居中 */
    z-index: 1; /* 确保标签在输入框上方 */
}

#coin-config .coin-text-input {
    width: 100%;
    padding: 4px 8px; /* 仅保留左右内边距的基础值 */
    box-sizing: border-box; /* 确保padding不影响输入框总宽度 */
}

添加的JavaScript代码（页面加载或本地化切换后执行）：

// 计算标签宽度并设置输入框padding-left
function adjustInputPadding() {
    document.querySelectorAll('#coin-config .wrapper-rel').forEach(wrapper => {
        const label = wrapper.querySelector('.inset-label');
        const input = wrapper.querySelector('.coin-text-input');
        if (!label || !input) return;
        
        // 获取标签的实际宽度，额外加8px避免输入文字紧贴标签
        const labelWidth = label.offsetWidth + 8;
        input.style.paddingLeft = `${labelWidth}px`;
    });
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', adjustInputPadding);

// 如果有本地化切换按钮，点击后重新执行
// 示例：假设切换按钮类名为localize-switch
// document.querySelector('.localize-switch').addEventListener('click', adjustInputPadding);

说明 #

• 方案1无需JS，兼容性好，语义更符合表单规范，推荐优先使用；
• 方案2完全匹配原有内嵌视觉，仅需少量JS即可实现动态适配，适合必须保留原有UI的场景。

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