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

Question

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

Answer 1

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

HTML

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

Answer 2

请检查

<div class="container">
    <div class="right">ASaasasasAaA</div>
    <div class="left"><input type="text" style="width:100%"></div>
</div>

CSS

.container {

    height:200px;
    border:1px solid;
}
.left {
    width:auto;

    background:red;
    overflow:hidden;
}
.right {


    background:blue;
    float:left;
}

demo

Answer 3

在flexbox的帮助下，您可以使用新的方式对齐项目：

HTML：

div {
    display: flex;
}

CSS：

label { white-space: nowrap; }
input { width: 100%; }

1. 演示http://jsfiddle.net/infous/710nz58m/
2. http://autoprefixer.github.io/获取浏览器前缀