样式表单错误消息的问题

Question

长话短说，当我提交表单时，每个输入字段下都有错误消息，其值无效。我正在使用Zend_Form，所以标记看起来像这样：

<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/register"><dl class="zend_form">
<dt id="firstName-label"><label for="firstName" class="required">First name</label></dt>
<dd id="firstName-element">
<input type="text" name="firstName" id="firstName" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>

<dt id="lastName-label"><label for="lastName" class="required">Last name</label></dt>
<dd id="lastName-element">
<input type="text" name="lastName" id="lastName" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="birthdate-label"><label for="birthdate" class="required">Birthdate (YYYY-MM-DD)</label></dt>
<dd id="birthdate-element">
<input type="text" name="birthdate" id="birthdate" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="email-label"><label for="email" class="required">Email</label></dt>
<dd id="email-element">
<input type="text" name="email" id="email" value="aaa" />
<ul class="errors"><li>'aaa' is no valid email address in the basic format local-part@hostname</li></ul></dd>

<dt id="username-label"><label for="username" class="required">Username</label></dt>
<dd id="username-element">
<input type="text" name="username" id="username" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="password-label"><label for="password" class="required">Password</label></dt>
<dd id="password-element">
<input type="password" name="password" id="password" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="password2-label"><label for="password2" class="required">Confirm password</label></dt>
<dd id="password2-element">
<input type="password" name="password2" id="password2" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>

<dt id="captcha-input-label"><label for="captcha-input" class="required">Captcha</label></dt>
<dd id="captcha-element">
<img width="125" height="50" alt="" src="/images/captcha/7978c51b6114d77be14cff3c66e8f514.png" />
<input type="hidden" name="captcha[id]" value="7978c51b6114d77be14cff3c66e8f514" id="captcha-id" />
<input type="text" name="captcha[input]" id="captcha-input" value="" />
<ul class="errors"><li>Captcha value is wrong</li></ul></dd>
<dt id="register-label">&#160;</dt><dd id="register-element">
<input type="submit" name="register" id="register" value="Submit" /></dd></dl></form>

我的CSS样式是这样的：

@CHARSET "UTF-8";

.errors {
    color: #D8000C;
}
.zend_form dt {
    clear: both;
    width: 35%;
    text-align: right;
    padding-right: 1em;
    font-weight: bold;
}
.zend_form dt, .zend_form dd {
    float: left;
    margin-top: 1em;
}
.zend_form #captcha-element img {
    float: left;
    border: 1px solid #000;
}
.zend_form #captcha-input {
    margin-left: 1em;
}
.zend_form #captcha-element .errors {
    clear: both;
    padding-top: 1em;
}

问题是，当错误消息太长时，它会向下移动相关的输入字段，并且看起来不太好。以下是一个示例（请参阅电子邮件字段）：

我不是CSS忍者，我无法修复此问题。有什么想法吗？

Answer 1

如果您不想更改html结构，那么

.zend_form dd { width: 50%; }

会做的伎俩

Answer 2

除非我错过了一些非常明显的内容，否则您的CSS无法轻松解决此解决方案，问题的根源不如简单的解决方案，不会涉及重新整理整个表单。

如果您想要快速解决方案（并且错误消息将保持原样），请在html中使用以下更改：

<li>'aaa' is no valid email address<br /> in the basic format local-part@hostname</li>

Answer 3

我做了类似这样的事情（$ this指的是表单本身）：

    $elements = $this->getElements();
    foreach($elements as $elem) {
      $elem->removeDecorator('Errors');
    }

后者你可以在表单中添加一个装饰器：

    $this->addDecorators(array(
        array('HtmlTag', array('tag'=>'dl', 'class'=>'form1')),
        array('FormErrors')
    ));