Html 如何使用静态占位符自动缩放输入？

我曾使用此黑客在

输入中创建一个静态占位符

：

<div class="l_standard staticPlaceholder">
    <label for="alias" style="cursor: text;">site.com/</label>
    <input type="text" name="alias" id="alias" maxlength="15" />
</div>

site.com/

但是我需要手动为

输入设置
宽度
，以防止在调整大小时破坏此结构。我怎样才能使这个
输入像“橡皮”一样

下面是一个例子-输入字段下降，制动器构造

谢谢。
只要把
.staticPlaceHolder
弄宽就行了。我把它改成宽度：300px宽度：100%将使其适合父div的宽度，但边框/填充/边距可能会使其有点扭曲，因此您可能还需要添加
框大小：边框框

表格单元格
演示：（我已使方框边框可见以演示布局；调整窗格大小以查看“橡皮”行为）

这需要一点技巧，即将一个单元格设置为1px宽，并依靠
display:table cell
的行为将其强制设置为所需的宽度

我添加了额外的标记作为“单元格”；可以用较少的元素来实现这一点

.staticPlaceholder {
    border: 1px solid #ccc;
    display: inline-block;
    white-space: nowrap;
    padding: 2px;
    width: 50%;
    display: table;
}
.staticPlaceholder > DIV {
    display: table-cell;
}
.staticPlaceholder > DIV:first-child {
    width: 1px;
}

使用IE8+、铬、FF进行测试


内联块
演示：

占位符文本的宽度没有依赖性，即它可以是您想要的任何内容。输入的宽度也不重要

.staticPlaceholder {
    border: 1px solid #ccc;

    /* important part */
    display: inline-block;
    white-space: nowrap;
}

.staticPlaceholder input {
    border: 0;
    outline: 0;

    /* width can be anything you want */
    width: 200px;
}

如果工作正常，它应该如下所示：


使用IE8+、Chrome、FF进行测试
你能举例说明你的意思吗？
占位符
输入属性有什么问题吗？@Explosion Pills，下面是一个示例-输入字段下降并停止构造。常见的
标签
如何成为“静态占位符”…？它需要看起来像这样-但输入将是橡胶的（自动缩放到需要的宽度）@ExplosionPills
placeholder
属性在IE上不起作用
s错误。实际上，
.staticPlaceHolder`的宽度是百分比，当我调整窗口大小时，该块也会调整大小，输入再次下降。。。