日程表单:全天行补 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:
@@ -187,6 +187,21 @@ $evLab = static function (string $text, string $for = '', bool $req = false) use
|
||||
⇒ 那句 `.field-hint` 整块删除(不再输出)。 */ ?>
|
||||
|
||||
<?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">
|
||||
<input type="checkbox" id="ev-allday" name="all_day" value="1"
|
||||
<?= $evIsAllDay ? 'checked' : '' ?>>
|
||||
|
||||
Reference in New Issue
Block a user