在dl HTML列表中的dt下方强制dd元素

Question

我不希望标题和数据并排显示，而是在上方/下方：

批号

1001

名字

乔伊

我试图进行一次“休息”，没有任何效果。

 <dl class="dl-horizontal">
            <dt>
                Batch Number 
            </dt>
            <dd>
                @Html.DisplayFor(model => model.RebateDetail.BatchNumber)
            </dd>
            <dt>
                First Name
            </dt>
            <dd>
                @Html.DisplayFor(model => model.RebateDetail.FirstName)
            </dd>

        </dl>

或者，如果我可以将它们放在 same 行上，那将是一个开始：

这是我当前的样式设置：

  <style>
    *{
        box-sizing: border-box;
    }

    .row {
        display: flex;
    }

    /* Create two equal columns that sits next to each other */
    .inputColumns {
        flex: 33%;
        padding: 10px;
        background-color: bisque;
    }
    .dd {
        margin: 0;
    }
    .dt {
        float: left;
        padding-right: 10px;
    }

</style>

Answer 1

如果要将dd设置为dt，只需将margin设置为0

<style>dd {margin: 0;}</style>

如果您希望它们在同一行上，请尝试以下操作：

<style>
  dt {float: left; padding-right: 10px; }
  dd {margin: 0;}
</style>