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字段固定在右边。

你可能需要或者可能不需要那么多的点，但是如果你有足够的空间覆盖你需要的最大值，那么多余的点被隐藏起来并不重要。

我为你创造了一个小提琴，完成了上述所有工作，应该是一个完整的解决方案：http://jsfiddle.net/FU66q/1/

希望有所帮助。

Answer 2

使用类似

之类的行交替背景颜色怎么样？

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

也许输入也是如此，所以它们一直持续（或将整个标签/输入对放在它自己的容器中）。

Answer 3

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

<强>示例

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点缀＃000;
宽度：25％; display：inline-block; }

标签和输入字段之间的点

3 个答案: