Oracle APEX 21.2.8指定项宽度后无法紧密并排问题

在APEX 21.2.8中可以通过以下几种方式实现两个项的紧密并排，尤其是其中一个为2字符固定宽度的场景：

方案一：内联项+自定义CSS #

• 将两个项的「布局」→「位置」设置为内联
• 给固定宽度项的「高级」→「CSS类」添加自定义类名，比如fixed-2char
• 在页面属性的「CSS」→「内联」中添加以下样式，覆盖默认间距：

/* 固定2字符宽度，可根据字体微调em值 */
.fixed-2char {
    width: 2em !important;
    margin-right: 0 !important;
}
/* 移除内联项之间的默认左侧间距 */
.t-Form-inputContainer--inline .t-Form-inputContainer {
    margin-left: 0 !important;
}

方案二：网格布局 #

• 添加一个「网格区域」，设置为1行2列，第一列宽度设为「内容宽度」，第二列设为「自动」
• 将固定宽度项放入第一列，另一项放入第二列
• 给网格区域的「高级」→「CSS类」添加tight-grid，并补充样式：

.tight-grid .t-Grid-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

同时给固定宽度项添加和方案一相同的fixed-2char类，确保宽度符合要求。

方案三：HTML区域直接包裹 #

• 添加HTML区域，用内联块布局直接渲染两个项，绕过APEX默认样式：

<span style="display: inline-block; width: 2em; margin-right: 0;">
    &P1_FIXED_ITEM.
</span>
<span style="display: inline-block; margin-left: 0;">
    &P1_OTHER_ITEM.
</span>

注意替换代码中的P1_FIXED_ITEM和P1_OTHER_ITEM为实际的项名称。

额外注意点 #

• 若项带有标签，建议将标签设置为「隐藏」或「顶部对齐」，避免干扰并排布局
• 不同字体的字符宽度有差异，可微调2em的值确保刚好容纳2个字符
• 测试时若样式不生效，可通过浏览器开发者工具确认APEX默认样式的优先级，必要时加强制性声明!important

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