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

Question

如下图所示，我有一个简单的表单可以实时验证字段并生成一个span ，该span说明该字段是否有效。 问题是，由于某种原因，即使跨度在其css规则中具有position:absolute ，也不会超出其范围。 顺便说一句，跨度使用javascript获取了right位置，该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';
}

这就是我想要的样子（ span超出了包含的div ）。 我只能通过给span指定一定的width来获得此结果，但这不是一个好的解决方案，因为每个消息的宽度都不同：

Answer 1

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

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

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

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

• 从div.row移除position:relative
• 更改设计，然后将错误消息移至输入下方

Answer 2

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