Question

我正在尝试构建一个响应式表单，然后我会在我的一些网站中使用它，但却陷入了一些细节。我想启用的javascript输入验证，所以当用户在输入文本框中插入一个无效的输入，我想一个错误信息由框弹出，与在输入框右侧的IMG标记和下一个DIV标签输入。我通过将（jQuery）这些元素附加到输入的父元素（即LABEL）来实现这一点。

这是基本输入：

<label for="errore"><span class="title">Errato</span><input type="text" name="errore" id="errore" size="30" maxlength="30" value="Cliccami e poi esci"/></label>

以下是我追加元素的方法。

$(this).parent().append("<img class='error' src='css/img/cross.png' alt='error' /><span class='error'>Input non valido.</span>");

因此，如果用户输入正确的输入并退出INPUT标记，则错误消息应该消失。我这样做是通过删除这样的元素来实现的：

$(this).parent().find("*.error").remove();

它运作得很好。但是，如果我按照这个顺序：错误的输入，退出元素，错误消息，正确的输入，退出元素，错误消息消失，错误的输入，退出元素，错误消息重新出现但图像在新行！这只是在铬。不知道为什么。这似乎取决于旁边的IMG元素的元素上，如果它是一个内联元素能正常工作的第1和第2次都，如果是正常工作的第一时间和第二错误块元素。

所以，我的问题是图像元素，我不希望它继续使用新行，但我希望它旁边的元素是一个块元素。

我知道这可能不太清楚，所以我会包括我的例子。

form example (JSFiddle)

在示例中，输入并退出标题为“Errato”的输入就足够了，添加错误消息，然后进入并退出以将其删除。因此，如果您这样做3次，您应该收到错误的错误消息。

它看起来像图像会显示：块什么的，“造成的影响是，如果你检查浏览器的控制台上的CSS，它实际上显示：内联

如果您需要更多详细信息，请随时提出。

Answer 1

看看这种方式来解决你的问题。我认为你只将输入字段放在label元素中，以便更好地添加和删除信息文本。所以这也可能是一个解决方案。

我所做的改变：在CSS中：删除了包含labeltext的span元素

label.title{ font-weight:bold; display:block; margin-top:5px; }

在Javascript中

：在输入字段后直接添加两个info元素，并使用类“.error”删除此输入字段的下两个兄弟节点。还将包含errormessage的范围更改为div元素。

I also forked your fiddle

Answer 2

float:left图片可以解决它。

Answer 3

在线对齐已解决：http://jsfiddle.net/CCEn2/6/

所做的更改：
在CSS中：删除 - “display：block;”对于“span.error”

span.error{ color: #ac3b2a; font-style: italic; }

在JS中：在标签

中添加了图像

$(this).parent().append("<span class='error'><img class='error' src='css/img/cross.png' alt='error' />Input non valido.</span>");

我希望你的查询是关于内联对齐的吗？

附加jQuery的内联元素在新行上

3 个答案: