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

我的web-app框架为无序列表中的每个字段呈现表单错误 <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; }

更新： 感谢大家的帮助！

虽然我的框架（django）默认提供错误，但我已经控制了HTML <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;}

13016

2017-11-05 19:12

起源

不，你没有偶然发现浏览器错误。您偶然发现了HTML中的错误。 p 标签（和 span s）也只能采用内联元素（正如jennyfofenny在她的回答中正确指出的那样： stackoverflow.com/questions/1682873/...）。 ul 是一个块级元素。 - mercator

谢谢墨卡托，你说得对。（从技术上讲，有一个浏览器错误，但它与Firefox允许我逃脱无效的HTML！） - dj.

答案:

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

p { display: inline; }

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

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

2017-11-05 21:19

谢谢珍妮。你赢了！ - dj.

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

2017-11-05 19:15

为什么这会继续上升？如果你费心测试它，你会发现它实际上并没有解决OP的问题。此外，从margin属性中排除单位是不好的做法。 - Asaph

@Asaph：你想给0什么单位？ - John

@约翰： margin: 0px 如果你想要它验证。 - Asaph

零不需要一个单位。 margin 需要 <length> 值，并且规范说：“在零长度之后，单位标识符是可选的。”： w3.org/TR/CSS2/syndata.html#value-def-length - mercator

@mercator：零后可选单元。我不知道。你每天都在stackoverflow上学到新东西:) - Asaph

最后一点：

ul.errorlist {
  显示：内联;
  list-style-type：none;
}

2017-11-05 19:16

对不起，没有雪茄。 <UL>中的'display：inline'不会阻止换行。 - dj.

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

如果是这样，请使用：

ul.errorlist {
    margin-top:0;
}

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

2017-11-05 19:42

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

如果你使用javascript，如果你知道什么时候发生错误，那么你可以添加一个  要么  周围的 <ul> 然后设置样式以使其内联。

此链接显示大约1/2向下使用  用于此目的的标签。

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

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

2017-11-05 19:48

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

答案:

热门问题

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