样式表单错误消息的问题

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') 
    ));