模态关闭图标和模态文本不正确

Question

 <div class="modal-title-area"> <div class="modal-name"> @{ ViewBag.Title = "Kişisel Bilgiler"; } @EmployeeCardRes.PersonalInfo </div> <div class="modal-root-page tag-label"> <i class="close icon"></i> </div> </div> <div class="modal-divider"></div> <div class="modal-content-area"> <div class="two-fields"> <div class="field "> <div class="label"> @EmployeeCardRes.FirstName @EmployeeCardRes.LastName <div class="text">@Model.FirstName @Model.LastName</div> </div> </div> <div class="field"> <div class="label">@EmployeeCardRes.PositionCode <div class="text">@ViewBag.Position</div> </div> </div> </div> </div>

div 里面的标签需要和帖子对应。 但是 label 在上面的文字中我该如何修复它。

我想那样做

Answer 1

您将需要为 label 和每一行的文本拆分 div 元素，所以你有

<div class="field">
  <div class="label">@EmployeeCardRes.PositionCode
    <div class="text">@ViewBag.Position</div>
  </div>
</div>

你应该用更像这样的东西替换它：

<div class="field">
  <div class="label">
    @EmployeeCardRes.PositionCode
  </div>
  <div class="text">
    @ViewBag.Position
  </div>
</div>

然后，您可以使用 CSS 修改 DOM 定位和显示它们的方式，如下所示将为您提供粗体文本和一点分隔：

.label,
.text {
  display: inline-block;
  font-weight: bold;
  margin: 5px;
  min-width: 200px;
}