div文本中不必要的换行符

Question

当用户按下注册按钮（＆＃34; Cadastrar＆＃34;用葡萄牙语）时，我需要隐藏新闻稿表格，这已经发生，因为您可以查看我的website。但是，成功消息将使用不必要的换行符进行渲染。为什么呢？

我需要填充页脚的整个高度（如果可能的话，不要在子div中固定高度），但文本应该在红色框中垂直居中。

通过访问我的网站，填写电子邮件地址字段并单击下面的按钮，您可能会发现很容易检查问题，但这里是HTML呈现的。

<div id="mc4wp-form-1" class="form mc4wp-form mc4wp-form-3571 mc4wp-ajax mc4wp-form-success">
    <form method="post" lpformnum="1" _lpchecked="1">
        <input type="email" name="EMAIL" class="text" placeholder="Seu email" required="">
        <input type="submit" class="bt" value="Cadastrar"><span class="mc4wp-ajax-loader" style="display: none; vertical-align: middle; height: 16px; width: 16px; border: 0px; margin-left: 5px; background: url(/img/ajax-loader.gif) 50% 50% no-repeat;"></span>
        <div style="position: absolute; left: -5000px;">
            <input type="text" name="_mc4wp_required_but_not_really" value="" tabindex="-1">
        </div>
    </form>
    <div class="mc4wp-response">
        <div class="mc4wp-alert mc4wp-success">Obrigado, seu cadastro foi efetuado com sucesso! Por favor verifique seu e-mail.</div>
    </div>
</div>

此处尝试在jsfiddle上重现。

Answer 1

可能的解决方案将float: left;属性添加到mc4wp-error选择器

.mc4wp-error {
    background-color: #FEE7ED;
    color: #F41952;
    border-color: #F41952;
    float: left; <----Add this
}

文字破解的原因

时事通讯，输入和按钮推送和打破文本

从

中删除float:left

footer form {
    width: 100% !important;
    float: left !important; <---Remove this
}

.mc4wp-alert {
    position: absolute;
    top: 0px;
    min-height: 200px;
}

移动视图和CSS更改max-width:480px

@media (max-width: 480px) {
    footer form {
        float: left !important; <---Remove this
    }

    .mc4wp-alert {
        position: absolute;
        top: inherit;
        min-height: 200px;
        bottom: -90px;
    }
}

Answer 2

如果你改变：

.mc4wp-alert {
  ...
  ...
  position: relative;
}

到position: fixed;，您会发现该空间实际上被电子邮件文本框和按钮占用。解决方案是使用position: absolute;。我在Chrome和IE11中进行了测试。