0

我有一个表格，在那个表格中，我有一个表格，只有一行和一个 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 框保持集中？

提前致谢！

//安德烈亚斯

4

3 回答 3

0

尝试这个：

#alertB {
  width: 100%;
}

小提琴：

于 2013-06-29T12:17:38.807 回答
0

只需定位 divabsolute使其脱离流程，您也可以将 afloat: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>
于 2013-06-29T12:18:40.953 回答
0

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

yourDiv { display: inline };

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

于 2013-06-29T12:47:50.330 回答