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%;
}

Answer 2

这个代码在 .absolute-wrapper 上

absolute-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
}

Answer 3

如果要保留绝对包装类的初始宽度，在.absolute-wrapper类

中添加

width: 256px;

消息元素导致父级扩展

问题：

代码：

3 个答案: