将 <dt> 与 <table> 中的 <dd> 连接起来答案

【问题标题】：concatenate <dt> with <dd> in <table>将 <dt> 与 <table> 中的 <dd> 连接起来
【发布时间】：2020-05-26 05:19:28
【问题描述】：

我想创建页眉，我需要在一行中连接 dt 和 dd 这是我的视图代码：

<div style="margin-left:100px">
    <hr />
    <dl class="horizontal">
        <dt>@Html.DisplayNameFor(model => model.labCashView.Patient_Name)</dt> 
        <dd>@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Patient_Name)</dd>
        <dt>@Html.DisplayNameFor(model => model.labCashView.Patient_No)</dt> 
        <dd>@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Patient_No)</dd> 
        <dt>@Html.DisplayNameFor(model => model.labCashView.SEX)</dt> 
        <dd>@Html.DisplayFor(model => model.FirstOrDefault().labCashView.SEX)</dd>
        <dt>@Html.DisplayNameFor(model => model.labCashView.AGE)</dt>  
        <dd>@Html.DisplayFor(model => model.FirstOrDefault().labCashView.AGE)</dd>
        <dt>@Html.DisplayNameFor(model => model.labCashView.order_number)</dt>  
        <dd>@Html.DisplayFor(model => model.FirstOrDefault().labCashView.order_number)</dd>


    </dl>
</div>

现在的输出是第一行的标题和第二行的数据：

患者姓名

萨米·阿里

Patient_No

345676

但我需要这样的输出：

Patient_Name Sami Ali

Patient_No 345676

等等，我该怎么做？

【问题讨论】：

标签： html asp.net-mvc model-view-controller

【解决方案1】：

您可以添加css，如下所示。根据您的要求更新您的 dt 和 dd 宽度。

可能会对这些元素应用一些默认的margin，因此如果您将widht 和100% 相加，那么它可能会在下一行显示dd。

dt {
  width: 30%;
  display: inline-block;
}

dd {
  width: 60%;
  display: inline-block;
  margin: 0px;
}

<div style="margin-left:100px">
    <hr />
    <dl class="horizontal">
        <dt>Patient_Name</dt> 
        <dd>abc</dd>
        <dt>Patient_No</dt> 
        <dd>123</dd>
    </dl>
</div>

【讨论】：