附加 jQuery 的内联元素换行

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 元素旁边的元素，如果它是内联元素，则第一次和第二次都可以正常工作，如果是块元素，则第一次可以正常工作，而第二次则错误。

所以，我的问题是图像元素，我不希望它换行，但我希望它旁边的元素是块元素。

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

form example (JSFiddle)

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

看起来图像要显示：块或其他东西，因为效果是这样，但是如果您检查浏览器控制台上的css，它实际上是显示：内联。

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

Answer 1

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

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

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

在 Javascript 中：直接在输入字段之后添加两个 info 元素，并删除该输入字段的下两个兄弟元素，类为“.error”。 还将保存错误消息的跨度更改为 div 元素。

I also forked your fiddle

Answer 2

行对齐已解决：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>");

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

Answer 3

float:left图片可以解决。