如何防止在无序列表之前发生换行？

Question

我的Web应用程序框架<UL>在无效字段后面的无序列表中为每个字段呈现表单错误.我的问题是我无法设置样式,以便错误与表单字段列在同一行.换行之前会换行<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' 与表单未验证(在服务器上)时呈现的'错误列表'之间的换行符？

目前我正在造型:

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

更新: 感谢大家的帮助!

虽然我的框架(django)默认提供错误,但我已经控制了HTML <UL>.根据伟大的建议,我尝试将列表包装在自己的样式<p>和<span>.<span>现在将列表包装在Firefox 3.0中,但在Safari 4.0中则不行.

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

我偶然发现了跨浏览器的错误吗？(不,见下文!)

最终解决方案:感谢您的帮助.以下是我最终解决问题的方法:

• 更换<p>用周围的标签字段的出错组合标签<div>与风格的clear:both;.感谢jennyfofenny指出W3C规范禁止在一个块内(在我的情况下是列表中)<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;}

Answer 1

如何设置要显示的p标签:内联也是如此？这是一个选择吗？

p { display: inline; }

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

P元素代表一个段落.它不能包含块级元素(包括P本身).