レスポンシブフォームを作成しようとしていたのですが、それをいくつかのWebサイトで使用していましたが、少し詳細に行き詰まりました。javascriptを使用して入力検証を有効にしたいので、ユーザーが入力テキストボックスに無効な入力を挿入すると、入力の右側にIMGタグがあり、下にDIVタグがあるエラーメッセージがボックスの横にポップアップ表示されます。入力。これは、これらの要素を入力の親要素であるLABELに追加（jQuery）することで実現します。
基本入力は次のとおりです。
<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回目の両方で正常に機能し、ブロック要素の場合は1回目は正常に機能し、2回目は正しく機能しません。
ですから、私の問題は画像要素です。新しい行に配置したくないのですが、その隣の要素をブロック要素にしたいのです。
これはそれほど明確ではないかもしれないことを私は知っているので、私の例を含めます。
この例では、「Errato」というタイトルの入力を入力して終了し、エラーメッセージを追加してから、入力して終了してメッセージを削除するだけで十分です。したがって、これを3回実行すると、間違ったエラーメッセージが表示されるはずです。
画像が表示されるように見えます：ブロックか何か、'効果はそれであるためですが、ブラウザのコンソールでcssを確認すると、実際には表示：インラインです。
詳細が必要な場合は、お気軽にお問い合わせください。