如何防止在无序列表之前发生换行？ [英] How do I prevent a line break occurring before an unordered list?

问题描述

我的网络应用框架在无效字段之后立即为无序列表< UL> 中的每个字段提供格式错误。我的问题是我无法设置样式，因此错误与表单字段列在同一行。而是在< UL> 之前呈现换行符。

My web-app framework renders form errors for each field in an unordered list <UL> immediately following the invalid field. My problem is that I haven't been able to style things so that the error(s) are listed on the same line with the form field. A line break is instead rendered before the <UL>.

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

This is the html that I'm trying to style, showing a server-determined invalid field:

<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 为每个必填字段显示一个星号，以及在表单未通过验证时（在服务器上）显示的错误列表？

How can I prevent a line-break between the 'field_required' span displaying an asterisk for each required field and the 'errorlist' that is rendered if the form doesn't validate (on the server)?

当前我的样式是：

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

更新：
到目前为止，感谢大家的帮助！

UPDATE: Thanks for everyone's help to date!

尽管我的框架（django）默认以< UL> 。根据很好的建议，我尝试将列表包装在自己样式的< p> 和&span> 中。现在，将列表包装为< span> 可以在Firefox 3.0中使用，但不能在Safari 4.0中使用。

I have control of the HTML out, although my framework (django) defaults to giving errors as a <UL>. As per the great suggestions I have tried wrapping the list in it's own styled <p> and <span>. Wrapping the list in a <span> now works in Firefox 3.0, but not in Safari 4.0.

何时我检查了Safari中的元素，即使不是如何使用HTML，但该段落似乎在< UL> 之前立即关闭了

When I inspect the element in Safari it seems that the paragraph is being closed immediately before the <UL>, even though this is not how the HTML source looks.

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

Have I stumbled on a cross-browser bug? (Nope. See below!)

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

FINAL SOLUTION: Thanks for all the help. Here is how I finally fixed the problem:

• 替换了< p> 标签字段错误组合周围的标签，其< div> 样式为 clear：both; 。感谢jennyfofenny指出W3C规范禁止在< p> 内进行阻塞（在我的情况下为列表），从而赢得了答案。这就是为什么Safari尽管Firefox允许幻灯片自动滑动而自动关闭了我的段落的原因。

• Replaced the <p> tags around the label-field-error combo with a <div> styled with clear:both;. Thanks to jennyfofenny for pointing out that the W3C spec prohibits a block (in my case the list) inside a <p> - and thus wins the answer tick. This is why Safari was automagically closing my paragraph before the list, although Firefox let it slide.

然后我对列表进行样式设置：

I then style my list thus:

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标签显示：内联以及？

What about setting the p tag to display: inline as well? Is that an option?

p { display: inline; }

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

As for the p tag issue... I don't believe the W3C specifications allow an unordered list tag within a paragraph tag. From http://www.w3.org/TR/html401/struct/text.html#h-9.3.1:

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

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

这篇关于如何防止在无序列表之前发生换行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！