我如何阻止一个行之前发生的无序列表?

StackOverflow https://stackoverflow.com/questions/1682873

  •  18-09-2019
  •  | 
  •  

题

我的网络应用程序框架呈现的形式错误的每个领域在一个无序列表 <UL> 后立即无效的领域。我的问题是，我没有能够风格的东西，这样的错误(s)都列在同一条线上的形式领域。断行为，而不是呈现之前 <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 显示一个星号，对于每个需要领域和'errorlist'呈现如果形成并不验证(在服务器)?

目前，我造型： 

  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>.为每个伟大的建议，我已经试图包装的清单，在它自己的风格 <p> 和 <span>.包裹在一个列表 <span> 现在在Firefox3.0，但不在野生动物4.0.

当我检查的元素在Safari看来，该段是立即关闭前 <UL>, 虽然这是 不 如何HTML源看起来。

我偶然在一个十字浏览器的错误？(不.看下面!)

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

  • 替换的 <p> 标记标签字的错误组合 <div> 风格 clear:both;.由于jennyfofenny指出，W3C规格禁止一块(在我的情况列表)内部一个 <p> -并因此赢得了回答。这就是为什么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;}
有帮助吗？

解决方案

什么约设置的p标记显示：内联呢？是一个选择吗？

p { display: inline; }

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

P件代表了一个段落。它不能包含的框级别的元素(包括P本身)。

其他提示

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

只是最后一点：

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

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

如果是这样，使用：

ul.errorlist {
    margin-top:0;
}

然后添加"余下：0;"的第(或只是把errorlist内部p标签)。如果你还要名单显示在单行线，采用显示：内联的其他建议。

如果你不能改变html然后你的问题是，ul没有元素周围，你可以的风格。

如果你使用javascript,如果你可以知道，当发生错误,那么你可以添加一个 <p> 或 <span> 周围 <ul> 然后式，以便将它的内联。

这个链接表示，约1/2的方式下使用的 <p> 标签用于这一目的。

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

如果你只是想要做到这一点，在css我相信你会走运。你可能会问，如果他们可以把一个封闭的标签围绕错误的列表，以便你们能够式。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top