razor div 使用 css ::after 跳过答案

【问题标题】：razor div skips out with css ::afterrazor div 使用 css ::after 跳过
【发布时间】：2023-03-29 04:42:01
【问题描述】：

这是我的 MVC 局部视图，

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

当它渲染视图中的项目时，会像下面这样在 p 标签之外渲染，

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

【问题讨论】：

为什么 p 中有 div
p 中不可能有 div。浏览器只是在启动 div 之前关闭 p。

标签： html css asp.net-mvc razor partial-views

【解决方案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>

参考：

The HTML paragraph element (MDN)

【讨论】：

我已经更正了这一点，但你的解释值得 +1

【解决方案2】：

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

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

【讨论】：

没有。 p 中不可能有 div。浏览器只是在启动 div 之前关闭 p。如果您怀疑我的话，请测试一下。