Question

我有一个表格，在那个表格中我有一张表，只有一行和一个TD集中了它的任何东西。我旁边有一个空的DIV，当INPUT盒离开INPUT盒时，它用作警告：

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

OR

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

我想你的问题是div正在突破下一行？如果是这种情况，那么你需要使div内联。默认情况下是阻止;

yourDiv { display: inline };

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

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

3 个答案: