Javascript 如何在集中输入框旁边添加DIV而不使输入框倾斜

我有一个表单，在这个表单中我有一个表，只有一行和一个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 >

Ange-din-bokningskod：

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 = "";
}

函数bookingNotEmpty（）
{
if（document.getElementById（“bokningskod”）.value==“”）{
document.getElementById（'alertB'）.innerHTML=“试试这个：

#alertB {
  width: 100%;
} 

只需定位div
绝对值
，使其脱离流，您也可以对警报div应用一个
浮动：右

<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 >

或

你也可以把alert 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>


安格丁·博克宁斯科德：
我想您的问题是div正在中断到下一行？如果是这种情况，那么您需要使div内联。默认情况下，它是block

yourDiv { display: inline }; 

这是提琴：
谢谢你花时间回答@Tamil，但它并没有解决我的问题。@Andreas：你试过那个提琴吗？你可以更新它来显示你的确切问题。不，我没有检查提琴，我会这样做！我必须使用类吗？我不能在CSS中继续使用ID吗？不幸的是，它不起作用。在第一种情况下，DIV出现在中间与文本混合（在顶部或后面，不确定）。在第二个建议中，div出现在输入框下方。您可以使用ID，但这仅适用于单个ID，我使用了一个类，以防您计划使用其他输入/div组合。至于重叠，您必须调整列/表宽度的大小。它必须足够大以容纳文本，输入框、div和它的文本，即使它们都正常排列，你也必须这样做。另外，编辑以添加第二列，这将使输入位于它自己的列中，警报div位于它旁边的列中。谢谢！我会尝试一下并报告。
<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>

yourDiv { display: inline };