asp.net - 带有 CSS 忽略的剃刀视图

Question

我无法解释 CSS 和 Razor 视图的问题。在我的项目中，我有两个具有相同结构的视图并使用相同的 CSS。在一个视图中，所有段落都正常，但在第二个视图中，如果某些标签为空，我在同一行中有两个段落。

我的工作视图：

 <link href="@Url.Content("~/Content/Template/defaultR.css")" rel="stylesheet" type="text/css" /> 
<div class="form_demande">
   //some div
<div class="form_content">
    <p>
        <span>
            @Html.Label("Nom") :
        </span>
        @Html.Label(Model.Nom)
    </p>
    <p>
        <span>
            @Html.Label("Prénom") :
        </span>
        @Html.Label(Model.Prenom)
    </p>

    <p>
        <span>
            @Html.Label("Service") :
        </span>
        @Html.Label(Model.Departement)
    </p>

    <p>
        <span>
            @Html.Label("Date début ") :
        </span>
        @ViewBag.Debut
    </p>
    <p>
        <span>
            @Html.Label("Date fin ") :
        </span>
        @ViewBag.Fin
    </p>
    <p>
        <span>
            @Html.Label("Date reprise ") :
        </span>
        @ViewBag.Reprise
    </p>
    <p>
        <span>
            @Html.Label("NombreJours ") :
        </span>
        @ViewBag.NombreJours
    </p>
    <p>
        <span>
            @Html.Label("Reliquat ") :
        </span>
        @ViewBag.Reliquat
    </p>

    <p>
        <span>
            @Html.Label("Interim ") :
        </span>
        @ViewBag.Interim
    </p>        
</div>

带有内联段落的视图：

 <link href="@Url.Content("~/Content/Template/defaultR.css")" rel="stylesheet" type="text/css" />
 <div class="form_demande">
 //some div
<div class="form_content">
    <p>
        <span>
            @Html.Label("Nom") :
        </span>
        @Html.Label(Model.Nom)
    </p>
    <p>
        <span>
            @Html.Label("Prénom") :
        </span>
        @Html.Label(Model.Prenom)
    </p>
    <p>
        <span>
            @Html.Label("Service") :
        </span>
        @Html.Label(Model.Departement)
    </p>

    <p>
        <span>
            @Html.Label("Motif de l'abscence") :
        </span>
        @ViewBag.Motif
    </p>
    <p>
        <span>
            @Html.Label("Jours Ouvrables") :
        </span>
        @ViewBag.JoursOuvrables
    </p>
    <p>
        <span>
            @Html.Label("Durée de l'abscence") :
        </span>
        @ViewBag.Duree
    </p>
    <p>
        <span>
            @Html.Label("Du ") :
        </span>
        @ViewBag.Depart
    </p>
    <p>
        <span>
            @Html.Label("Au ") :
        </span>
        @ViewBag.Retour
    </p>
</div>

form_content 的 CSS：

 .form_demande {
margin: 15px;
font-size: 18px;
width: 600px;
}
.form_demande span {
    float: left;
    width: 150px;
    text-align: left;
}
.form_demande p {
    padding: 0 0 4px 0;
}
.form_demande p, blockquote, ul, ol {
    margin-bottom: 20px;
    line-height: 20px;
    text-align: justify;
}
.form_content {
margin-top: 90px;
}

这是结果：

注意：如果我在视图中填写所有数据，一切正常

Answer 1

试试这个CSS：

.form_demande p{
  clear: left;
}