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

Question

我一直在使用这个 hack 在以下位置创建一个静态占位符input：

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

但是我需要手动设置一个widthforinput以防止在调整大小时破坏这个结构。我怎样才能使它input像“橡胶”？

这是一个示例 - http://jsfiddle.net/qKfqa/输入字段关闭并制动构造。

谢谢。

Answer 1

表格单元格

演示： http: //jsfiddle.net/qKfqa/7/（我已使框边框可见以演示布局；调整窗格大小以查看“橡胶”行为）。

这依赖于一点技巧，即将一个单元格设置为 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+、Chrome、FF 测试}

---

内联块

演示：http: //jsfiddle.net/qKfqa/5/

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

.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 测试}

Answer 2

width: 100%;在输入上将使其适合父 div 的宽度，但边框/填充/边距可能会搞砸一点，所以你可能还想添加box-sizing: border-box.

http://jsfiddle.net/qKfqa/2/

Answer 3

只是.staticPlaceHolder变宽。我将其更改为：http width: 300px;: //jsfiddle.net/qKfqa/1/