Laravel结合DomPDF时内联CSS布局问题：如何让数据及下划线居标题右侧

核心问题原因 #

布局异常是因为默认块级元素会自动换行，导致数据库渲染的数据和下划线被挤到「Name」下方。需要将「Name」与数据区域设置为同行排列的布局。

可行解决方案 #

方案1：使用inline-block实现同行布局 #

适合所有版本的DomPDF，兼容性最好：

<div style="width: 100%;">
  <!-- 固定宽度的标签文本 -->
  <span style="display: inline-block; vertical-align: top; width: 60px;">Name: </span>
  <!-- 占剩余宽度的内容容器 -->
  <div style="display: inline-block; width: calc(100% - 70px);">
    {{ $data->name }}
    <!-- 下划线样式 -->
    <div style="border-bottom: 1px solid #000; margin-top: 4px;"></div>
  </div>
</div>

• 关键设置：将两个元素都设为display: inline-block，用vertical-align: top保证顶部对齐
• 用calc(100% - 70px)计算内容容器宽度，留出标签的宽度和间隙，避免换行
• 下划线用border-bottom实现，比<hr>更易控制样式

方案2：使用Flex布局（DomPDF 0.8.0+支持） #

如果你的DomPDF版本较新，Flex布局更简洁灵活：

<div style="display: flex; align-items: flex-start; width: 100%; gap: 10px;">
  <span>Name: </span>
  <!-- 占剩余空间的内容容器 -->
  <div style="flex: 1;">
    {{ $data->name }}
    <div style="border-bottom: 1px solid #000; margin-top: 4px;"></div>
  </div>
</div>

• 关键设置：父容器设为display: flex，内容容器添加flex: 1自动填充剩余宽度
• gap: 10px控制标签和内容的间隙，无需手动计算宽度

注意事项 #

• 避免使用float布局，DomPDF对浮动的渲染兼容性较差，容易出现错位
• 如果使用<hr>，需重置默认样式：style="margin: 0; border: none; border-bottom: 1px solid #000;"
• 确保所有元素的宽度总和不超过父容器宽度，防止强制换行

内容的提问来源于stack exchange，提问作者CaptainCRAZY