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

只需在您的部分助手之后添加以下给定 div。希望有用。

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

Answer 2

问题实际上源于<p>标签是一个启用"tag omission"的块级元素，如果在匹配结束标签之前找到下面提到的这些元素，它会自动省略结束标签并自行关闭</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>

参考：

The HTML paragraph element (MDN)

razor div 跳过 css ::after

razor div skips out with css ::after

html

css

asp.net-mvc

razor

partial-views