Javascript css问题：绝对定位范围不会超出包含div的范围

如下图所示，我有一个简单的表单实时验证字段，并生成一个

span

，说明该字段是否有效。问题是，出于某种原因，span不会扩展出包含的div，即使它的css规则中有

位置：absolute

。顺便说一句，span使用javascript获得其

右侧的
位置，该位置计算该字段的宽度（因为每个字段的宽度不同）。有什么建议吗


以下是css代码：

div.row {
    background:url('/img/formBackground.gif') repeat;
    margin:0 2px 2px 2px;border-radius:10px 0 10px 0;
    position:relative
}

.row span.valid,
.row span.invalid {
    line-height:18px;
    height:20px;padding:0 22px 0 5px;
    display:block;font-size:13px;
    border-radius:3px;position:absolute;
    z-index:100;top:4px;right:160px
}

以下是html代码：

    <div class="row">
        <label for="email">דואר אלקטרוני: <span class="required">*</span></label>
        <div class="divider"></div>
        <input type="text" name="email" id="email" style="width:250px" dir="ltr"/>
    </div>


דואר אלקטרוני: *

以下是javascript代码：

email.onchange = function validateEmail() {
    span = document.getElementById('span4');
    span.style.right = calcDistance(email);
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    el = email.value;
    if(el == null || el == '') {span.setAttribute('class','invalid');span.innerHTML = "<span></span>עליך להזין דוא\"ל";return false;}
    if(reg.test(el) == false) {span.setAttribute('class','invalid');span.innerHTML = "<span></span>כתובת הדוא\"ל אינה תקינה";return false;}
    else {span.setAttribute('class','valid');span.innerHTML = "<span></span>תקין";return true;}
}

    function calcDistance(el) {
    var spanDistance = 160 + 20;
    var targetWidth = el.offsetWidth;
    return targetWidth + spanDistance + 'px';
}

email.onchange=函数validateEmail（）{
span=document.getElementById（'span4'）；
span.style.right=calcDistance（电子邮件）；
变量reg=/^（[A-Za-z0-9\-\.]）+\@（[A-Za-z0-9\-\.]）+\.（[A-Za-z]{2,4}）$/；
el=email.value；
如果（el==null | | el=='''{span.setAttribute（'class'，'invalid'）；span.innerHTML=”返回false；”
if（reg.test（el）=false）{span.setAttribute（'class'，'invalid'）；span.innerHTML=“•••בהאא”㪜אהתתינהההאאאננננהנ
else{span.setAttribute（'class'，'valid'）；span.innerHTML=“תקין”返回true；}
}
功能钙距离（el）{
无功承载力=160+20；
var targetWidth=el.offsetWidth；
返回targetWidth+拱度+‘px’；
}

这就是我希望它的外观（
span
扩展到包含
div
）。我只能通过给
span
指定一定的
宽度来获得这个结果，这不是一个好的解决方案，因为每条消息的宽度都不同：

具有
位置的元素：relative
将“捕获”任何绝对位置的子元素。换句话说，绝对元素的坐标是相对于父元素的



（参见“包含块”部分）

虽然计算输入宽度来创建错误消息宽度是聪明的，但这可能是一种过于脆弱的设计。您可能会遇到错误消息，这些消息对于消息本身来说太小了，尤其是当您认为您对用户的字体大小没有真正的100%的控制时。

这里没有足够的代码在图像中重现输出，但可能的解决方案或解决方法可能包括：


从
div.row
更改设计，并将错误消息移到输入下方
在查看了一些旧帖子后，我设法解决了这个问题，添加了
空白：无包装到
span
CSS规则
 我们能在某处看到这个的现场版本吗？还是JSFIDLE？缩小输入框的大小以容纳较长的错误消息？好的，这里是JSFIDLE:[link]（）中的完整代码，好的，伙计们，我已经修复了！！我在一个旧的堆栈溢出帖子中看到了这一点。问题在于跨度的css规则。我所需要做的就是添加：
空白：nowrap
。就这样！顺便问一下，你知道我如何将这篇文章标记为已解决？我使用输入的宽度来计算错误消息的位置，而不是错误消息的宽度。我注意到的一件事是，当我没有使用javascript代码时，错误消息
span
将扩展到包含的div之外。也许问题出在javascript代码中？好吧，我明白了，你真的不应该这样做，但是如果没有代码来复制它，很难判断。如果你能在上发布一个演示，我相信它很容易解决，如果你能更明确地解释你想要发生的事情，那也将是一个很大的帮助。谢谢@Madmartigan，这里有一个我仍然不确定你想要发生什么，但是关于这个：我改变了什么，请参阅CSS窗格的底部。作为分隔器、填隙片和间隙固定的空分隔器几乎都是不必要的，这使得按照您放置东西的方式工作有点困难。当然，如果没有它们，就需要重写所有的CSS…我正试图使
span
扩展出包含
div
。我用一张新的图片更新了我原来的帖子，向你展示我的目标。