html - razor div 使用 css ::after 跳过

Question

这是我的 MVC 部分视图，

  <p class="contain mutliOptions method" id="paymentOptions">                                       
      @Html.Partial(MVC.Payment.Views._PaymentMethods, Model)
  </p> 

当它呈现视图中的项目时，呈现在 p 标签之外，如下所示，

为什么突出显示的 div 在 div 之外跳过，知道吗？

Answer 1

实际上源于<p>标签的问题是启用“标签省略”的块级元素，如果在匹配结束标签之前找到下面提到的这些元素，它会自动省略结束标签并自行关闭</p>：

• <address>
• <article>
• <aside>
• <blockquote>
• <div>
• <dl>
• <fieldset>
• <footer>
• <form>
• <h1>到<h6>
• <header>
• <hr>
• <menu>
• <nav>
• <ol>
• <pre>
• <section>
• <table>
• <ul>
• 另一个<p>元素

因此，这意味着上面的那些块元素不能嵌套在<p>元素内部。

而不是使用段落标签来嵌套上面提到的其他元素，你可以只使用<div>标签来嵌套<div>s：

<div class="contain mutliOptions method" id="paymentOptions">                                       
    @Html.Partial(MVC.Payment.Views._PaymentMethods, Model)
</div> 

参考：

HTML 段落元素 (MDN)

Answer 2

只需在您的部分助手之后添加以下给定的 div。希望它会奏效。

<p class="contain mutliOptions method" id="paymentOptions">                                       
      @Html.Partial(MVC.Payment.Views._PaymentMethods, Model)
      <div style="clear:both"></div>
</p>