页面内容右对齐、文本边框自适应及标签布局调整的实现咨询

云上老周

2026-4-21

嘿，我来帮你搞定这两个布局问题！你的核心需求是让内容边框只包裹文本，同时让标签和内容横向紧挨着，对吧？咱们一步步来调整：

问题根源分析

你原来的代码用了Bootstrap的col-sm-2和col-sm-10栅格类，这些类会强制元素占据固定比例的宽度，所以dd元素才会拉得很宽，边框也就跟着覆盖了空白区域；另外栅格的布局逻辑也让标签和内容没法紧凑排列。

修改后的代码及说明

<style>
.top {
  text-align: right;
}
/* 自定义dl的布局，让dt和dd横向排列 */
.custom-dl {
  display: flex;
  align-items: center;
  gap: 8px; /* 标签和内容之间的间距，可按需调整 */
}
/* 给dt和dd设置边框，宽度由内容决定 */
.custom-dl dt,
.custom-dl dd {
  border: 1px solid black;
  padding: 2px 4px; /* 给文本加一点内边距，看起来更舒服 */
  margin: 0; /* 清除默认的margin */
}
</style>

<h1 style="text-align:center">Grading Station</h1>

<div class="top">
  <dl class="custom-dl">
    <dt>
      @Html.DisplayNameFor(model => model.OutturnReferenceNo)
    </dt>
    <dd>
      @Html.DisplayFor(model => model.OutturnReferenceNo)
    </dd>
  </dl>
</div>

关键调整点

移除栅格类：删掉了col-sm-2和col-sm-10，这样元素不会再被强制占宽，宽度完全由内部文本决定，边框自然就只包裹文本了。
用Flex布局实现横向排列：给dl加了display: flex，让dt和dd在同一行展示，align-items: center保证它们垂直居中，gap用来控制标签和内容之间的间距。
清除默认样式：给dt和dd设置margin:0，避免浏览器默认的外边距影响布局，同时加了一点内边距让文本和边框之间不会太挤。