如何在不倾斜输入框的情况下在集中输入框旁边添加 DIV

Question

我有一个表格，在那个表格中我有一个表格，只有一行和一个 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 = "";
}

我的问题是什么？

如果 INPUT 框为空，则将文本添加到 DIV 中，但由于它是集中的，因此将 INPUT 框移动到左侧。

即使我在 DIV 中添加文本，我是否可以通过某种方式使 INPUT 框保持集中？

提前致谢！

//安德烈亚斯

Answer 1

试试这个：

#alertB {
  width: 100%;
} 

Fiddle:

Answer 2

我想你的问题是 div 正在进入下一行？如果是这种情况，那么您需要使 div 内联。默认是块；

yourDiv { display: inline }; 

这里是小提琴：http://jsfiddle.net/JXypM/

Answer 3

只需定位 div absolute 使其脱离流程，您也可以将 float:right 应用于警报 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 >

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>