html - div (テキストを含む) をテキストフィールドと同じ行にしたい

Question

入力が正しくない場合にのみ表示される、いくつかの説明、テキストフィールド、およびいくつかのエラーメッセージを含む別の div があります。これはすべて ap タグでラップされています。私の問題は、エラーメッセージをテキストフィールドと説明と同じ行に表示し、テキストが長すぎる場合にのみ、次の行に表示するには多すぎる単語を表示することです。ただし、その方法がわかりません。試してみると、次の行にエラーメッセージ全体が表示されます。誰でもそれを修正する方法を知っていますか?

コード: HTML:

<p><div class="text">Benutzername</div><input id="bname" class="button" onkeyup="valid('#bname','#bntext')" onkeydown="valid('#bname','#bntext')" type="text" /><div id="bntext" class="hiddentext">Der Benutzername muss mindestens 4 Zeichen und darf maximal 8 Zeichen enthalten.</div></p>

CSS

.button{
    position:relative;
    left:0%;
}

.text{
    display:inline-block;
    position:relative;
    text-align:left;
    width:20%;
}
.hiddentext {
    /*display:none;*/
    color:#FF0000;  
}

フィドルはこちら: http://jsfiddle.net/LGp8k/

Answer 1

エラー メッセージのspan代わりに使用します。div

エラー メッセージをインラインで表示したい。span「当然」インライン要素です。divブロック要素である whichを使用する場合は、そのスタイルを に設定する必要がありますdisplay: inline。jQuery を使用している場合は、.show()条件付きでエラー メッセージを表示するために使用している可能性があり、デフォルトではdisplay: block;div タグに設定されます。デフォルトのspan表示スタイルはインラインです。

Answer 2

エラーを表示したいときは、このクラスをdiv#bntext

.hiddentext-show {
      display:inline;           
 }

Answer 3

float:left

<p><div class="text">Benutzername</div><input id="bname" class="button" onkeyup="valid(this.value)" type="text" /><div id="bntext" class="hiddentext">Der Benutzername muss mindestens 4 Zeichen und darf maximal 8 Zeichen enthalten.</div></p>
<script>
    function valid(val)
    {
     var elem = document.getElementById("bntext");
         if(val.length>8)
          {
             elem.style.display='block';
          }
    else
    {
      elem.style.display='none';
    }
    }
</script>

CSS:

.button{
    position:relative;
    left:0%;
}
.p
{
    float:left;
}
.text{
    display:inline-block;
    position:relative;
    text-align:left;
    width:20%;
}
.hiddentext {
    display:none;
    float:right;
    color:#FF0000;  
}

ここで jsfiddle :

http://jsfiddle.net/TNLZh/

Answer 4

使用する

 float:left;

.button および .text 用