css - 由 zend form 创建的样式定义列表(必须在 IE7+ 中工作)

Question

我正在使用 Zend_Form 及其默认装饰器来创建表单。这将输出以下 HTML:

<dl>
<dt><label for="title">Title</label></dt>
<dd>
  <input type="text" name="title" value="some title">
  <ul>
    <li>Some error message for the title</li>
    <li>Some other error message for the title</li>
  </ul>
</dd>
<dt><label for="type">Type</label></dt>
<dd>
  <select name="type">
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
    <option value="3">Type 3</option>
  </select>
  <ul>
    <li>Some error message for the type</li>
    <li>Some other error message for the type</li>
  </ul>
</dd>
<dt><label for="description">Description</label></dt>
<dd>
  <textarea name="description" rows="40" cols="100">This is a description of the item</textarea>
  <ul>
    <li>Some error message for the description</li>
    <li>Some other error message for the description</li>
  </ul>
</dd>

我需要对其进行样式设置，以便标 checkout 现在相关输入框的左侧，而无序列表中的任何错误出现在它们相关的元素的右侧。

在过去的美好时光(开玩笑)，我可以使用包含 3 列的表格实现我想要的效果，如下所示:

<table>
<tr>
  <th><label for="title">Title</label></th>
  <td><input type="text" name="title" value="some title"></td>
  <td>
    <ul>
      <li>Some error message for the title</li>
      <li>Some other error message for the title</li>
    </ul>
  </td>
</tr>
<tr>
  <th><label for="type">Type</label>
  </th>
  <td><select name="type">
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
    <option value="3">Type 3</option>
  </select></td>
  <td>
    <ul>
      <li>Some error message for the type</li>
      <li>Some other error message for the type</li>
    </ul>
  </td>
</tr>
<tr>
  <th><label for="description">Description</label></th>
  <td><textarea name="description" rows="40" cols="100">This is a description of the item</textarea></td>
  <td>
    <ul>
      <li>Some error message for the description</li>
      <li>Some other error message for the description</li>
    </ul>
  </td>
</tr>
</table>

显然这不是我真正想要考虑的事情。主要是因为我真的不想将列固定为相同的宽度。

我也尝试不使用 zend 表单装饰器方法，因为从代码可读性的 Angular 来看，您需要提供的糟糕的嵌套数组非常糟糕。我理想的方法可能是在每个标签、输入和 ul 周围包装一个 div，然后在 div 上使用 clear:both。然后我可以在每个标签、输入和 ul 上使用 float:left。

我一直在测试这个问题的其他各种答案:http://htmledit.squarefree.com/

虽然没有其他人的解决方案似乎真正有效。显然，它需要在 IE 中工作，尽管在 IE7 之前没有任何东西。如果有人能想出一些只适用于 IE8 的东西，那么一推就可以了。

我曾尝试将自定义 View 脚本应用于表单元素，但由于选择而引发了一大堆其他问题。

根据以下文章，将 ul 元素放在 dl 的 dd 部分中是完全有效的，只是不在 dt 中:http://www.maxdesign.com.au/articles/definition/

Answer 1

使用 jQuery。我假设错误 ul 元素有一些与之关联的错误类。 Javascript:

$('ul.error').each(function(){
  $(this).appendTo(     //get error <ul>
   $(this)              //start chain from self
   .parent()            //move to parent <td>
   .prev()              //move to previous <td> element
  );                // and append there.
});