日程表单:全天行补 62px 标签占位,与上方输入框左对齐

用户 2026-11-05:「全天那个应该是输入框,它应该往右和那个输入框对齐。」

根因:观影式排版(`.mv-row`)里每行左侧有一个 62px 的 `.mv-lb` 标签列,
控件从 62px 之后开始,上面所有输入框左边缘都在那条线上。
而「全天」这一行没有标签(checkbox 自带"全天"二字),
`<label class="chk-inline">` 直接贴在行的最左边(x=0),
比上面的输入框往左偏了 62px,看着就是错位。

修法:补一个空的 `.mv-lb.no-colon` 占位。

不用 padding-left:62px 的原因:那条 62px 是 `.mv-row > .mv-lb`
的 `flex:0 0 62px` 算出来的,而 .mv-lb 宽度在窄屏媒体查询里会变
(app.css 6196 行附近),写死 padding 会跟它脱节。
用空标签则天然跟随同一套规则。

仅在 $evMv(观影式排版)下补 —— 整页表单是 .form-grid 两列,
没有 62px 标签列,补了反而多出缩进。
This commit is contained in:
2026-11-05 16:00:19 +08:00
parent 306f5a61cb
commit 403ecd9dea
+15
View File
@@ -187,6 +187,21 @@ $evLab = static function (string $text, string $for = '', bool $req = false) use
⇒ 那句 `.field-hint` 整块删除(不再输出)。 */ ?> ⇒ 那句 `.field-hint` 整块删除(不再输出)。 */ ?>
<?php echo $evRowOpen(); ?> <?php echo $evRowOpen(); ?>
<?php /* 🔴 2026-11-05(用户:「全天那个应该是输入框,它应该往右和那个输入框对齐」):
观影式排版(`.mv-row`)里每一行的左侧都有一个 62px 的 `.mv-lb` 标签列,
控件从 62px 之后开始 —— 上面所有输入框的左边缘都在那条线上。
而「全天」这一行**没有标签**(它不需要文字标签,checkbox 自带「全天」二字),
`<label class="chk-inline">` 就直接贴在行的最左边(x=0),
比上面的输入框往左偏了 62px,看着像"错位了"。
⇒ 补一个**空的** `.mv-lb` 占位(`no-colon` 免得画出「:」)。
不用 `padding-left:62px` 的原因:那条 62px 是 `.mv-row > .mv-lb`
的 `flex:0 0 62px` 算出来的,而 `.mv-lb` 的宽度在窄屏媒体查询里
会变(见 app.css 的 6196 行附近),写死 padding 会跟它脱节。
用空标签则**天然跟随**同一套规则,改一处两边都对。
⚠️ 仅在观影式排版(`$evMv`)下补:整页表单是 `.form-grid` 两列,
没有 62px 标签列,补了反而会多出缩进。 */ ?>
<?php if ($evMv): ?><span class="mv-lb no-colon" aria-hidden="true"></span><?php endif; ?>
<label class="chk-inline"> <label class="chk-inline">
<input type="checkbox" id="ev-allday" name="all_day" value="1" <input type="checkbox" id="ev-allday" name="all_day" value="1"
<?= $evIsAllDay ? 'checked' : '' ?>> <?= $evIsAllDay ? 'checked' : '' ?>>