Django模板如何实现同一行显示H6标签与普通字号变量不换行

你遇到的换行问题属于HTML基础使用问题，和Django特性无关。HTML中<h1>~<h6>默认是块级元素，渲染时会自动占据整行，后续内容会被挤到下一行显示。

常用解决方法 #

• 方案1：修改h6的默认展示属性
  给h6标签添加display: inline或display: inline-block的样式，即可让它变为行内元素，和后续内容在同一行展示：

<div>
    <h6 style="display: inline; margin-right: 4px;">Creator By:</h6> {{ order.creator }}
</div>
<div>
    <h6 style="display: inline; margin-right: 4px;">Category:</h6> {{ order.category }}
</div>

如果有多个同类标签可以提取公共CSS类复用样式：

<style>
.inline-h6 {
    display: inline;
    margin-right: 4px;
}
</style>
<div>
    <h6 class="inline-h6">Creator By:</h6> {{ order.creator }}
</div>
<div>
    <h6 class="inline-h6">Category:</h6> {{ order.category }}
</div>

• 方案2：替换为行内元素模拟h6效果
  直接使用原生行内的<span>标签，设置和h6一致的字号、字重样式，从根源避免换行问题：

<div>
    <span style="font-size: 0.875rem; font-weight: bold; margin-right: 4px;">Creator By:</span> {{ order.creator }}
</div>
<div>
    <span style="font-size: 0.875rem; font-weight: bold; margin-right: 4px;">Category:</span> {{ order.category }}
</div>

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