css问题：绝对定位的跨度不会延伸到包含div

Question

如下图所示，我有一个简单的表单，可以实时验证字段并生成span，表明该字段是否有效。问题是，由于某种原因，跨度不会延伸到包含div之外，即使它的css规则中有position:absolute。顺便说一下，span使用javascript获取right位置，计算该字段的宽度（因为每个字段的宽度不同）。有什么建议吗？

这是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';
}

这就是我希望它看起来的样子（span延伸到包含div之外。我只能通过向width提供某个span来获得此结果，这不是一个好的解决方案，因为每条消息的宽度都不同：

Answer 1

position:relative元素将“捕获”任何绝对定位的子元素。换句话说，绝对元素的坐标是相对于父元素的。

• http://css-tricks.com/absolute-positioning-inside-relative-positioning/
• http://www.quirksmode.org/css/position.html（请参阅“包含块”部分）

在计算输入宽度以创建错误消息宽度时很聪明，这可能只是设计太脆弱了。您最终可能会收到错误消息，这些消息对于消息本身来说太小了，尤其是当您认为您没有真正完全控制用户的字体大小时。

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

• 从position:relative
移除div.row
• 更改您的设计，并在输入下方移动错误消息

Answer 2

在查看一些旧帖子后，我设法通过将white-space:no-wrap;添加到span CSS规则来解决问题。