html - 消息元素导致父元素展开

Question

一段时间以来，我一直在努力解决这个问题。

这是我的问题:我正在构建一个库来简化 AJAX 调用并在表单上整齐地内联显示错误消息。

---

问题:

显示消息时，表单会改变宽度。

• 表单需要动态调整大小
• 消息可以是多行

想要的结果:

消息应根据表单的宽度填充，并且不会导致表单发生变化。

---

代码:

HTML:

<div class="absolute-wrapper">
<form class="wrapper">
    <label>
        Foobar:
        <input type="text" name="name"/>
    </label>
    <div class="message" id="Message">
        Error: Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat.
    </div>
    <input type="submit"/>
</form>
</div>

CSS:

.absolute-wrapper {
        position:absolute;
        top:0;left:0;
        }
.wrapper { 
        background:#f0f0f0; 
        padding:10px;
        }

div.message { color:red; background:#fee; 
              width:100%;/* should be 100% of the form, but it is not */
            }

---

我为此制作了一个JSFiddle:http://jsfiddle.net/redolent1/2WvVL/

这可以用纯 CSS 完成吗？

Answer 1

我的版本

DEMO

HTML

<div class="absolute-wrapper">
<form class="wrapper">
    <label>
        Foo Bar:
        <input class="text" type="text" name="name"/>
    </label>
    <div class="message" id="Message">
    </div>
    <p> 
        Click submit to test: 
        <input type="submit"/>
    </p>
</form>
</div>

CSS

.absolute-wrapper {
        position:absolute;
        top:0;left:0;
    display: block;
        }
.wrapper { 
        background:#f0f0f0; 
        padding:10px;
        }

div.message { color:red; background:#fee; }
div.message {
        display:none;
        }
.text {
    width: 100%;
}