объединить <dt>с <dd>в <table>

Question

Я хочу создать заголовок страницы, и мне нужно объединить 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>

Теперь вывод заголовок в одной строке и данные во второй строке:

Имя пациента

Сами Али

Номер пациента

345676

Но мне нужен такой вывод:

Имя пациента Сами Али

Patient_No 345676

и т. Д. Как я могу это сделать?

Answer 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>