fix(nav): 「我的短语」输入框被撑成 200px 高 #17
用户原话:「地址设置,短语那里,输入框怎么那么高啊。」
病根:模板把 input 包在 .field 里,而 .field 本身又是 .inline-form 的 flex 子项。
.field 是 flex-direction: column ⇒ 主轴是垂直方向,
于是 `.inline-form .input { flex: 1 1 200px }` 的 flex-basis
落在了**高度**上,再叠加 flex-grow 继续拉长。
.inline-form 的 align-items:center 又让它垂直居中,
看起来就是"一个很高的输入框 + 旁边孤零零一个按钮"。
线上实测(部署前,Playwright 量真实 rect):
短语输入框 h = 200.00px ← 正好等于 flex-basis
同页正常 input h = 45.80px
差 154.20px
修法:换用专属类 .nav-phrase-form,不动通用规则。
· 外层横向 flex(输入区 + 按钮),只把输入区当 flex 子项;
· 输入区内部仍走 .field 的纵向堆叠,并显式把内部 .input 的 flex 收回去
(这一条是关键:不收的话 flex-basis 又跑回垂直轴);
· 按钮 align-self:flex-end 跟输入框底对齐(tip 在下方,居中会显得按钮浮起来);
· 窄屏 ≤480px 按钮换行靠左。
为什么不去改 .inline-form 那条通用规则:
全站另有 15 处在用 .inline-form,且都是"input 直接当水平子项"的正确用法,
改通用规则会波及那些页面。本处是**孤例**(唯一把 .field 嵌进去的)。
验证(线上真实页面):
· 短语输入框 200.00px → 45.80px,与同页正常 input 差 0.0px
· label/input/tip 仍垂直堆叠;按钮与 input 垂直交叠 7.7px
· 回归:个人设置/任务看板/任务详情/笔记/名册/日程/微信读书/导航,
11 个 .inline-form 内的 input 全部 45.80px,零偏离
This commit is contained in:
+13
-1
@@ -169,7 +169,19 @@ $setItems = [
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
<?php if ($canWrite): ?>
|
||||
<form method="post" action="<?= e(url('nav/save')) ?>" class="inline-form">
|
||||
<?php /* 🔴 工单 #17(用户 2026-10-28):「地址设置,短语那里,输入框怎么那么高啊」
|
||||
⚠️ 这里**不能**用 `.inline-form`:它的通用规则
|
||||
`.inline-form .input { flex: 1 1 200px; max-width: 320px }`
|
||||
(assets/css/app.css)是把 input 当**水平** flex 子项设计的。
|
||||
而本表单要把 label / input / tip **垂直**堆叠,所以 input 必须包在 `.field`
|
||||
(`flex-direction: column`)里 —— 一旦那样包,`flex-basis: 200px`
|
||||
就落在**垂直主轴**上,直接把输入框撑成 200px 高的一条。
|
||||
|
||||
⇒ 用专属类 `.nav-phrase-form`:外层横向 flex(input 区 + 按钮),
|
||||
内层 `.field` 纵向堆叠,并显式把内部 `.input` 的 `flex` 收回去。
|
||||
⚠️ 不要去改 `.inline-form` 那条通用规则:全站另有 15 处在用它,
|
||||
而且那 15 处都是"input 直接当子项",改通用规则会波及它们。 */ ?>
|
||||
<form method="post" action="<?= e(url('nav/save')) ?>" class="nav-phrase-form">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="act" value="phrase_save">
|
||||
<div class="field">
|
||||
|
||||
Reference in New Issue
Block a user