Html 如何防止在无序列表之前出现换行符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1682873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I prevent a line break occurring before an unordered list?
提问by dj.
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>.
我的网络应用程序框架<UL>在无效字段之后立即为无序列表中的每个字段呈现表单错误。我的问题是我无法设置样式，以便错误与表单字段列在同一行。换行符在<UL>.
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' spandisplaying an asterisk for each required field and the 'errorlist' that is rendered if the form doesn't validate (on the server)?
span如果表单未验证（在服务器上），如何防止在为每个必填字段显示星号的“field_required”和呈现的“errorlist”之间出现换行符？
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 <p>and <span>. Wrapping the list in a <span>now works in Firefox 3.0, but not in Safari 4.0.
我可以控制 HTML，尽管我的框架 (django) 默认将错误作为<UL>. 根据很棒的建议，我尝试将列表包装在它自己的样式<p>和<span>. 将列表包装<span>在 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 nothow the HTML source looks.
当我在 Safari 中检查元素时，似乎该段落在 之前立即关闭<UL>，即使这不是HTML 源代码的外观。
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
<p>tags around the label-field-error combo with a<div>styled withclear: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.
<p>将 label-field-error 组合周围的标签替换<div>为clear:both;. 感谢 jennyfofenny 指出 W3C 规范禁止在 a<p>- 中使用块（在我的情况下是列表），因此赢得了答案。这就是为什么 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;}
回答by jennyfofenny
What about setting the p tag to display: inline as well? Is that an option?
将 p 标签设置为 display: inline 怎么样？这是一个选择吗？
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 本身）。
回答by Daniel A. White
ul.errorlist { display: inline; margin: 0; }
回答by No Surprises
Just one last bit:
最后一点：
ul.errorlist {
display: inline;
list-style-type: none;
}
回答by No Surprises
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。
回答by James Black
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 <p>or <span>around the <ul>and then style that so that it will be inline.
如果您使用 javascript，如果您可以知道何时发生错误，那么您可以添加<p>或<span>围绕<ul>，然后设置样式，使其成为内联。
This link shows, about 1/2 way down, using the <p>tag for this purpose.
此链接显示，大约 1/2 向下，<p>为此目的使用标签。
http://www.alistapart.com/articles/taminglists/
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 中做到这一点，我相信你会不走运。您可能会问他们是否可以在错误列表周围放置一个封闭标记，以便您可以对其进行样式设置。
