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:hiddenandwhite-space:nowrap来隐藏多余的点并防止它们自动换行，然后我们只使用 CSSposition来确保input字段固定在右侧。

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

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

希望有帮助。

Answer 2

您还可以将元素放入行中并突出显示不同的行。

样本

http://jsfiddle.net/Zrh7Q/2/

其他想法/示例

http://jsfiddle.net/Zrh7Q/

http://jsfiddle.net/Zrh7Q/1/

HTML

<label for="firstname">Firstname: </label>
<span class="dots"></span>
<input type="text" size="55" id="firstname" name="firstname" value="">
<br />
<label for="lastname">Lastname: </label>
<span class="dots">&nbsp;</span>
<input type="text" size="55" id="lastname" name="lastname" value="">

CSS .dots {border-bottom: 1px dotted #000;
宽度：25%；显示：内联块；}

Answer 3

使用类似的东西为行交替背景颜色怎么样

label:nth-child(even) {
    background-color: #EEE;
}

也许输入也有一些东西，所以它们一直持续下去（或者将整个标签/输入对放在它自己的容器中）。