jquery - 标签和输入字段之间的点

Question

是否可以在label标签(左对齐)和input标签(右对齐)之间放置点或线来帮助用户选择正确的输入？

<label for="firstname">Firstname: </label><input type="text" size="55" id="firstname" name="firstname" value="">

Answer 1

这是一个使用 CSS ::after 选择器的简单案例。

此选择器允许您在元素后插入附加内容。在这种情况下，我们希望在 label 元素之后插入一大堆点。所以我们只需这样做:

label::after {
    content:'....................................................................................................................';
}

很明显，这本身不会很好，因为它会导致各种自动换行问题和/或将输入框推错位置，所以我们也需要处理所有这些问题，但就是这样相对琐碎。

我们使用overflow:hidden 和white-space:nowrap 来隐藏多余的点并防止它们自动换行，然后我们只使用CSS position 以确保 input 字段固定在右侧。

您可能需要也可能不需要那么多的点，但是由于隐藏了多余的点，只要您有足够的点来覆盖您将需要的最大点数，这并不重要。

我为您创建了一个 fiddle ，它可以完成上述所有操作，应该是一个完整的解决方案:http://jsfiddle.net/FU66q/1/

希望对您有所帮助。