Question

我正在使用PureCSS和jQuery Validate插件。

我的代码如下：

<form id='new-doctor' class='pure-form'>
   <fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="Doctor Name" required minlength="2">
    <textarea class="pure-input-1-2" placeholder="Credentials"></textarea>
   </fieldset>
</form>

http://jsfiddle.net/jGdK9/

如果没有验证，那么输入组看起来很棒（两个输入在中间连接），但是一旦验证发生（尝试输出，请在名称中键入少于两个字符）输入并在输入外单击）该组分离，不再好看。

Answer 1

问题在于选择器form .pure-group input:first-child的规则（在pure-min.css中），它将此输入的top设置为-1px。在此输入之前附加验证标签后，此选择器将不再与您的输入匹配，因此top属性的假定值为1px，由另一个规则（{{1}定义}）。

你可以通过一些猴子补丁解决这个问题：

.pure-form .pure-group input

Answer 2

使用此css代码段修复此

.pure-form .pure-group input {
    top: 0;
}

以下是更新后的jsfiddle

验证会混淆输入组CSS

2 个答案: