Question

我对CSS和Razor视图有疑问，我无法解释。在我的项目中，我有两个相同结构的视图，并使用相同的CSS。在一个视图中，所有的paragraphes都可以，但是在第二个视图中，如果某个标签是空的，我在同一行中有两个paragraphes。

我的工作观点：

 <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;
}

结果如下：

Two views side by side

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

Answer 1

试试这个css：

.form_demande p{
  clear: left;
}

使用CSS的Razor视图忽略<p> </p>

1 个答案: