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

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>.

我的web-app框架在无效字段后面的无序列表

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

这是我要设置样式的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>

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)?

如何防止显示每个必填字段的星号的'field_required'范围与如果表单未验证(在服务器上)时呈现的'错误列表'之间的换行符?

Currently I am styling:

目前我正在造型:

  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!

更新:感谢大家的帮助!

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  and . Wrapping the list in a  now works in Firefox 3.0, but not in Safari 4.0.

虽然我的框架(django)默认将错误作为

和中。现在,在中包装列表可以在Firefox 3.0中使用,但在Safari 4.0中则不行。

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.

当我在Safari中检查元素时,似乎该段在

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:

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

Replaced the  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  - and thus wins the answer tick. This is why Safari was automagically closing my paragraph before the list, although Firefox let it slide.

将label-field-error组合周围的

标签替换为带有clear:both;样式的

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

中阻止一个块(在我的情况下是列表) - 因此赢得了答案。这就是为什么Safari会在列表前自动关闭我的段落,尽管Firefox会让它滑动。

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

5 个解决方案

#1

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

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

p { display: inline; }

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标签问题......我不相信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).

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

#2

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

#3

Just one last bit:

最后一点:

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

#4

Do you just want to eliminate the space between the paragraph and the list?

你只是想消除段落和列表之间的空间吗?

If so, use:

如果是这样,请使用:

ul.errorlist {
    margin-top:0;
}

Then add "margin-bottom:0;" to the paragraph (or just put the errorlist inside the p tags). If you also want the list to display on a single line, use display:inline as the others suggested.

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

#5

If you can't change the html then your problem is that the ul has no element around it that you can style.

如果你不能改变html那么你的问题是ul周围没有可以设置样式的元素。

If you use javascript, if you can know when an error happens, then you can add a  or  around the <ul> and then style that so that it will be inline.

如果您使用javascript,如果您可以知道错误发生的时间,那么您可以在

或,然后设置样式以使其内联。

This link shows, about 1/2 way down, using the  tag for this purpose.

此链接显示大约1/2向下,使用

标记用于此目的。

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

If you are just trying to do this in css I believe you will be out of luck. You may ask if they can put a enclosing tag around the error list so you are able to style it.

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

#1