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>。根据伟大的建议，我尝试将列表包装在自己的样式和中。将代码包装在现在可以在Firefox 3.0中使用，但不能在Safari 4.0中使用。

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

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

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

替换了标签字段错误组合周围的标记，其中<div>样式为clear:both;。感谢jennyfofenny指出W3C规范禁止内的块（在我的情况下是列表） - 从而赢得答案。这就是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本身）。

Answer 2

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

Answer 3

最后一点：

ul.errorlist {
  display: inline;
  list-style-type: none; 
}

Answer 4

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

如果是，请使用：

ul.errorlist {
    margin-top:0;
}

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

Answer 5

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

如果您使用javascript，如果您知道错误发生的时间，那么您可以在周围添加或<ul>，然后设置样式以使其内联

此链接显示大约1/2左右，为此目的使用标记。

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

如果你只是想在css中这样做，我相信你会失去运气。您可以询问他们是否可以在错误列表周围放置一个封闭标记，以便您可以设置样式。

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

5 个答案: