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

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”与表单未验证（在服务器上）时呈现的“errorlist”之间出现换行？

目前我正在造型：

span

更新：

感谢大家迄今为止的帮助！ 我可以控制 HTML 输出，尽管我的框架（django）默认以

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

的形式给出错误。根据很好的建议，我尝试用自己的风格

<UL>

和

<p>

包装列表。将列表包装在

<span>

中现在可以在 Firefox 3.0 中使用，但不能在 Safari 4.0 中使用。当我在 Safari 中检查该元素时，该段落似乎在

<span>

之前立即关闭，尽管这不是

 HTML 源代码的外观。

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

最终解决方案：

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

将标签字段错误组合周围的

<UL>

标签替换为带有
• <p>

   样式的 

  <div>

  。感谢 jennyfofenny 指出 W3C 规范禁止在 

  clear:both;

   内出现块（在我的例子中是列表） - 因此赢得了答案。这就是为什么 Safari 会自动关闭我在列表之前的段落，尽管 Firefox 让它滑动。

  然后我这样设计我的列表：

<p>

是否也将 p 标签设置为 display: inline 呢？这是一个选择吗？

Answer 1

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;}

至于 p 标签问题...我不相信 W3C 规范允许在段落标签内使用无序列表标签。来自

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

：

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

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

Answer 2

如果是这样，请使用：

p { display: inline; }

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

ul.errorlist {
    margin-top:0;
}

Answer 3

最后一点：

Answer 4

ul.errorlist { 显示方式：内嵌； 列表样式类型：无； }

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

Answer 5

如果您使用 javascript，如果您可以知道何时发生错误，那么您可以在

ul.errorlist { display: inline; margin: 0; }

周围添加

<p>

 或 

<span>

，然后设置样式，使其内联。

此链接显示，大约向下 1/2，为此目的使用 

<ul>

标签。

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

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