输入类型框宽度应根据标签内容自动缩放

Question

这是我的场景：该页面将被翻译成不同的语言。我希望输入类型框宽度应根据翻译的“搜索”文本自动缩放，而不更改 CSS/结构。

Answer 1

您需要一种让盒子模型自动适应的方法。使用 CSS 表格布局可能会达到您的目的。

超文本标记语言

<div class="input-row">
    <label for="myInput">Search</label>
    <input id="myInput" type="text" placeholder="text input"/>
</div>

CSS

.input-row {
    display: table;
    width: 100%;
}
.input-row label {
    display: table-cell;
    width:1%;
    white-space:nowrap;
}
.input-row input {
    display: table-cell;
    width:100%;
}

https://jsfiddle.net/836c154c/