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

Question

我的网络应用程序框架为无序列表中的每个字段呈现表单错误 <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> 

如何防止“field_required”span 之间的换行符？如果表单未验证(在服务器上)，是否为每个必填字段显示一个星号和呈现的“错误列表”？

目前我正在做造型:

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

更新:感谢大家迄今为止的帮助!

我可以控制 HTML，尽管我的框架 (django) 默认将错误作为 <UL> 给出.根据很好的建议，我尝试将列表包装在它自己的样式中 <p>和 <span> .将列表包装在 <span> 中现在可以在 Firefox 3.0 中使用，但不能在 Safari 4.0 中使用。

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

我是不是遇到了跨浏览器错误？ (不。见下文!)

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

• 替换了 <p>带有 <div> 的标签字段错误组合周围的标签样式为 clear:both; .感谢 jennyfofenny 指出 W3C 规范禁止在 <p> 中使用 block (在我的例子中是列表) - 从而赢得答案打勾。这就是为什么 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 标签也设置为 display: inline 怎么样？这是一个选择吗？

p { display: inline; }

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

The P element represents a paragraph. It cannot contain block-level elements (including P itself).