TMS WEB Core设计时与运行时布局不匹配，标签间距异常求助

问题根源 #

从给出的DFM代码和截图来看，所有WebLabel同时设置了Align = alRight和WidthPercent = 100，这两个属性存在冲突：

• 设计时IDE会优先按照固定Width和Left值排列控件，因此显示正常；
• 运行时浏览器会严格执行WidthPercent = 100的规则，让每个WebLabel占满父容器（WebPanel）的全部宽度，最终导致标签重叠、间距混乱。

修复方案 #

方案1：删除冲突的WidthPercent属性 #

直接编辑DFM代码，删掉每个WebLabel的WidthPercent = 100.000000000000000000行。修改后的单个WebLabel示例如下：

object WebLabel1: TWebLabel
  Left = 1315
  Top = 0
  Width = 49
  Height = 85
  Margins.Left = 0
  Margins.Top = 0
  Margins.Right = 0
  Margins.Bottom = 0
  Align = alRight
  Caption = 'Log in'
  HeightPercent = 100.000000000000000000
  Layout = tlCenter
  ExplicitHeight = 25
end

注：保留HeightPercent = 100是安全的，它仅用于让标签高度铺满WebPanel。

方案2：换用WebFlowPanel优化布局 #

如果需要更灵活的自适应导航布局，建议将父容器从TWebPanel替换为TWebFlowPanel：

• 设置WebFlowPanel的Align = alTop、FlowDirection = fdRightToLeft；
• 每个WebLabel设置Align = alNone，仅保留固定宽高和Margins配置，运行时控件会自动从右往左排列，彻底避免属性冲突。

效果验证 #

修改完成后重新编译项目，浏览器会按照固定宽度+alRight的逻辑渲染控件，布局将与设计时完全一致。

设计时布局：

原运行时异常布局：

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