javascript - 入力ボックスを歪めずに中央の入力ボックスの横に DIV を追加する方法

Question

私はフォームを持っており、そのフォームにはテーブルがあり、行は 1 つしかなく、TD はその中のすべてを一元化しています。入力ボックスを離れるときに入力ボックスが空の場合に備えて、警告として使用する空のDIVが横にあります。

<td align="center" >Ange din bokningskod: <input id="bokningskod" type="text" name="bokningskod" autofocus="true" maxlength="8" size="10" onblur="bookingNotEmpty();" /> <div id="alertB" ></div></td >

JavaScript 関数は次のようになります。

function bookingNotEmpty()
{
    if (document.getElementById("bokningskod").value == "") {
        document.getElementById('alertB').innerHTML = "<< Kan ej vara tomt!";
        document.getElementById("bokningskod").focus();
        return false;
        }
    document.getElementById('alertB').innerHTML = "";
}

私の問題は何ですか？

入力ボックスが空のままの場合、テキストは DIV に追加されますが、入力ボックスは中央にあるため左に移動します。

DIV にテキストを追加しても、何らかの方法で INPUT ボックスを中央に配置したままにすることはできますか?

前もって感謝します！

//アンドレアス

Answer 1

absoluteフローから除外するようにdiv を配置するだけfloat:rightで、アラート div に a を適用することもできます。

<td align="center" class="inputalert" >
    Ange din bokningskod: 
    <input id="bokningskod" type="text" name="bokningskod" autofocus="true" maxlength="8" size="10" onblur="bookingNotEmpty();" /> 
    <div class="alertdiv" id="alertB" ></div>
</td >

CSS

.inputalert {
    position:relative; //needed to keep the div in the td
}

.inputalert .alertdiv {
    position:absolute;
    right:0px;
    top:0px;
}

また

.inputalert .alertdiv {
    float:right;
}

アラート div を別の td に配置して、横に表示することもできます

<td align="center" class="inputalert" >
    Ange din bokningskod: 
    <input id="bokningskod" type="text" name="bokningskod" autofocus="true" maxlength="8" size="10" onblur="bookingNotEmpty();" /> 
</td >
<td>
    <div class="alertdiv" id="alertB" ></div>
</td>

Answer 2

あなたの問題は、divが次の行に割り込んでいることだと思いますか? この場合、div をインラインにする必要があります。デフォルトではブロックです。

yourDiv { display: inline }; 

これがフィドルです：http://jsfiddle.net/JXypM/

Answer 3

これを試して：

#alertB {
  width: 100%;
} 

フィドル: