12

<UL>我的 Web 应用程序框架在无效字段之后立即为无序列表中的每个字段呈现表单错误。我的问题是我无法设置样式，以便将错误与表单字段列在同一行。换行符在<UL>.

这是我尝试设置样式的 html，显示了服务器确定的无效字段： 

<p>  
    <label for="id_email">Email</label>  
    <input id="id_email" type="text" name="email" />  
    <span class='field_required'> *</span>  
    <ul class="errorlist"><li>This field is required.</li></ul>  
    </p>

如何防止在span为每个必填字段显示星号的“field_required”与表单未验证（在服务器上）时呈现的“errorlist”之间出现换行符？

目前我正在造型： 

  span.field_required {color:red; display:inline;}  
  ul.errorlist {list-style-type: none; display:inline;}  
  ul.errorlist li {display: inline; color:red; }

更新： 感谢大家迄今为止的帮助！

尽管我的框架 (django) 默认将错误作为<UL>. 根据伟大的建议，我尝试将列表包装在它自己的风格<p>和<span>. 在 Firefox 3.0中将列表包装在 a <span>now 中有效，但在 Safari 4.0 中无效。

当我在 Safari 中检查元素时，似乎该段落在 . 之前立即关闭<UL>，即使这不是HTML 源代码的外观。

我是否偶然发现了跨浏览器错误？（不。见下文！）

最终解决方案：感谢所有帮助。这是我最终解决问题的方法：

  • <p>将 label-field-error 组合周围的标签替换<div>为带有clear:both;. 感谢 jennyfofenny 指出 W3C 规范禁止 a 内的块（在我的情况下是列表）<p>，因此赢得了答案。这就是为什么 Safari 会自动关闭我在列表之前的段落，尽管 Firefox 让它滑动。

然后我设置我的列表样式：

ul.errorlist {list-style-type: none; display:inline; margin-left: 0; padding-left: 0;}
ul.errorlist li {display: inline; color:red; font-size: 0.8em; margin-left: 0px; padding-left: 10px;}
4

5 回答 5

13

将 p 标签设置为 display: inline 怎么样？这是一个选择吗？

p { display: inline; }

至于 p 标签问题......我不相信 W3C 规范允许在段落标签中使用无序列表标签。来自http://www.w3.org/TR/html401/struct/text.html#h-9.3.1：

P 元素代表一个段落。它不能包含块级元素（包括 P 本身）。

于 2009-11-05T21:19:08.017 回答
1 
ul.errorlist { display: inline; margin: 0; }
于 2009-11-05T19:15:57.203 回答
1

最后一点：

ul.errorlist {
  显示：内联；
  列表样式类型：无；
}
于 2009-11-05T19:16:47.403 回答
1

您只是想消除段落和列表之间的空格吗？

如果是这样，请使用：

ul.errorlist {
    margin-top:0;
}

然后添加“margin-bottom:0;” 到段落（或者只是将错误列表放在 p 标签内）。如果您还希望列表显示在单行上，请按照其他人的建议使用 display:inline 。

于 2009-11-05T19:42:07.057 回答
0

如果您无法更改 html，那么您的问题是 ul 周围没有您可以设置样式的元素。

如果您使用 javascript，如果您可以知道何时发生错误，那么您可以添加一个<p>or<span>周围的<ul>然后样式，以便它是内联的。

此链接显示，大约 1/2 的方式，<p>为此目的使用标签。

http://www.alistapart.com/articles/taminglists/

如果你只是想在 css 中做到这一点，我相信你会不走运。您可能会问他们是否可以在错误列表周围放置一个封闭标签，以便您可以对其进行样式设置。

于 2009-11-05T19:48:43.597 回答