导航地址设置：「我的短语」输入框被撑成 200px 高 #17

New Issue

2026-10-28T03:54:24Z

laoyang commented

2026-10-28 03:54:24 +00:00

现象（用户反馈）

「地址设置，短语那里，输入框怎么那么高啊。」

导航 → 设置 → 地址设置 →「我的短语」那个输入框，高度被撑成一长条，
和右边「保存短语」按钮完全不成比例，看着像多行文本框。

根因（已定位）

模板 templates/nav/index.php:172-184，短语输入框被包在 .field 里，
而 .field 本身又是 .inline-form 的 flex 子项：

<form class="inline-form">
  <div class="field">                  <!-- display:flex; flex-direction:column -->
    <label>我的短语</label>
    <input class="input" name="phrase">  <!-- ← 被下面这条规则命中 -->
    <span class="tip">要 4~32 位…</span>
  </div>
  <div class="btn-row"><button>保存短语</button></div>
</form>

assets/css/app.css:1645 这条通用规则：

.inline-form .input { flex: 1 1 200px; max-width: 320px; }

flex-basis: 200px 作用在父级 flex 容器的主轴上。
.field 是 flex-direction: column，主轴是垂直方向 ⇒
这 200px 变成了高度，再叠加 flex-grow: 1 继续拉长。
.inline-form 自己的 align-items: center 又让整块垂直居中，
于是视觉上就是"一个很高的输入框 + 旁边孤零零一个按钮"。

为什么只有这一处坏

全仓 16 处 .inline-form，只有 nav 这一处把 .field 嵌进去
（其余都是直接把 <input class="input"> 当 flex 子项，flex-basis 落在水平方向，正确）。
⇒ 这是孤例，不能去改 .inline-form .input 那条通用规则，否则会波及另外 15 处。

期望

「我的短语」输入框恢复成普通单行输入框的高度，与全站其它 .input 一致：

高度 = 单行 input 的高度（padding: 10px 12px + font-size: 14px + 1px 边框）；
label 在上、input 在中、灰色提示在下，垂直排列保持不变；
「保存短语」按钮与输入框垂直居中对齐，不要错位；
「换一串随机的」那个按钮位置不变。

验收标准

「我的短语」输入框实测高度接近单行 input，不是 200px 量级。
（量法：getBoundingClientRect().height，与页面上任意一个正常 .input 对比，差值应在个位像素内。）
label / input / tip 仍然垂直堆叠（不是被压成一行）。
「保存短语」按钮的垂直中线与输入框中线基本重合。
其它 15 处 .inline-form 外观零变化 —— 改完要回头逐一看一遍，
尤其：笔记分享、日程分享、名册分享、任务看板/分类、个人设置标签、微信读书。
移动端窄屏不溢出、不换行错乱。

为什么单独建单

与 #16 是两件独立的事：#16 是表单缺上传控件（功能缺口），本条是已存在的输入框 CSS 高度错乱（样式 bug），可单独验收

## 现象（用户反馈） > 「地址设置，短语那里，输入框怎么那么高啊。」导航 → 设置 → 地址设置 →「我的短语」那个输入框，**高度被撑成一长条**，和右边「保存短语」按钮完全不成比例，看着像多行文本框。 ## 根因（已定位）模板 `templates/nav/index.php:172-184`，短语输入框被包在 `.field` 里，而 `.field` 本身又是 `.inline-form` 的 flex 子项： ```html <form class="inline-form"> <div class="field">  <label>我的短语</label> <input class="input" name="phrase">  <span class="tip">要 4~32 位…</span> </div> <div class="btn-row"><button>保存短语</button></div> </form> ``` `assets/css/app.css:1645` 这条通用规则： ```css .inline-form .input { flex: 1 1 200px; max-width: 320px; } ``` `flex-basis: 200px` 作用在**父级 flex 容器的主轴**上。 `.field` 是 `flex-direction: column`，**主轴是垂直方向** ⇒ 这 200px 变成了**高度**，再叠加 `flex-grow: 1` 继续拉长。 `.inline-form` 自己的 `align-items: center` 又让整块垂直居中，于是视觉上就是"一个很高的输入框 + 旁边孤零零一个按钮"。 ### 为什么只有这一处坏全仓 16 处 `.inline-form`，**只有 nav 这一处把 `.field` 嵌进去** （其余都是直接把 `<input class="input">` 当 flex 子项，`flex-basis` 落在水平方向，正确）。 ⇒ 这是孤例，**不能**去改 `.inline-form .input` 那条通用规则，否则会波及另外 15 处。 ## 期望「我的短语」输入框恢复成**普通单行输入框**的高度，与全站其它 `.input` 一致： - 高度 = 单行 input 的高度（`padding: 10px 12px` + `font-size: 14px` + 1px 边框）； - label 在上、input 在中、灰色提示在下，**垂直排列保持不变**； - 「保存短语」按钮与输入框**垂直居中对齐**，不要错位； - 「换一串随机的」那个按钮位置不变。 ## 验收标准 1. 「我的短语」输入框实测高度**接近单行 input**，不是 200px 量级。（量法：`getBoundingClientRect().height`，与页面上任意一个正常 `.input` 对比，差值应在个位像素内。） 2. label / input / tip **仍然垂直堆叠**（不是被压成一行）。 3. 「保存短语」按钮的垂直中线与输入框中线**基本重合**。 4. **其它 15 处 `.inline-form` 外观零变化** —— 改完要回头逐一看一遍，尤其：笔记分享、日程分享、名册分享、任务看板/分类、个人设置标签、微信读书。 5. 移动端窄屏不溢出、不换行错乱。 --- ### 为什么单独建单与 #16 是两件独立的事：#16 是表单缺上传控件（功能缺口），本条是已存在的输入框 CSS 高度错乱（样式 bug），可单独验收

laoyang referenced this issue from a commit

2026-10-28 04:48:54 +00:00

fix(nav): 「我的短语」输入框被撑成 200px 高 #17

laoyang commented

2026-10-28 04:50:17 +00:00

修完并已上线

eaa74bc（已 push）。改动 2 个文件：assets/css/app.css + templates/nav/index.html（后者是换表单类名）。

根因

.inline-form .input { flex: 1 1 200px } —— 这个 flex-basis: 200px 落在哪个轴由父级 flex-direction 决定。

短语表单里 .field 被嵌进了 .inline-form，而 .field 自己是 flex-direction: column。于是 200px 从"宽度"变成了高度，输入框被撑成 200px 高。

为什么不能改通用规则

全站 16 处用了 .inline-form，只有导航短语表单这一处把 .field 嵌进去 —— 是孤例。改通用规则会波及另外 15 处正常表单。

所以换专属类 .nav-phrase-form，并在里面把 input 从"flex 子项"退化成普通块（flex: 0 0 auto），彻底掐掉 flex-basis 跑到垂直轴的可能。

线上实测

量的是什么	修复前	修复后
短语输入框高度	200.00px	45.80px
同页正常 `.input` 高度	45.80px	45.80px
两者差值	154.20px	0.0px
按钮与输入框垂直交叠	无（被挤到下方）	7.7px（同一行）

几何探针 _tooling/_b33_nav_phrase_geo.py，9 通过 / 0 失败。

回归

全站 16 处 .inline-form 抽了 8 个页面、11 个 input 逐个量高度，全部 = 45.80px，零偏离。并断言导航管理页的 .inline-form 里已经没有 input（确认真的换掉了，不是两条规则并存）。

_tooling/_b33_inlineform_regress.py，3 通过 / 0 失败。

## 修完并已上线 `eaa74bc`（已 push）。改动 2 个文件：`assets/css/app.css` + `templates/nav/index.html`（后者是换表单类名）。 ### 根因 `.inline-form .input { flex: 1 1 200px }` —— 这个 `flex-basis: 200px` 落在**哪个轴**由父级 `flex-direction` 决定。短语表单里 `.field` 被嵌进了 `.inline-form`，而 `.field` 自己是 `flex-direction: column`。于是 `200px` 从"宽度"变成了**高度**，输入框被撑成 200px 高。 ### 为什么不能改通用规则全站 **16 处**用了 `.inline-form`，只有导航短语表单这一处把 `.field` 嵌进去 —— 是孤例。改通用规则会波及另外 15 处正常表单。所以换专属类 `.nav-phrase-form`，并在里面把 input 从"flex 子项"退化成普通块（`flex: 0 0 auto`），彻底掐掉 `flex-basis` 跑到垂直轴的可能。 ### 线上实测 | 量的是什么 | 修复前 | 修复后 | |---|---|---| | 短语输入框高度 | **200.00px** | **45.80px** | | 同页正常 `.input` 高度 | 45.80px | 45.80px | | 两者差值 | 154.20px | **0.0px** | | 按钮与输入框垂直交叠 | 无（被挤到下方） | 7.7px（同一行） | 几何探针 `_tooling/_b33_nav_phrase_geo.py`，**9 通过 / 0 失败**。 ### 回归全站 16 处 `.inline-form` 抽了 8 个页面、11 个 input 逐个量高度，全部 = 45.80px，**零偏离**。并断言导航管理页的 `.inline-form` 里已经没有 input（确认真的换掉了，不是两条规则并存）。 `_tooling/_b33_inlineform_regress.py`，**3 通过 / 0 失败**。

laoyang commented

2026-10-28 04:50:22 +00:00

上一条笔误：改动文件是 templates/nav/index.php，不是 .html。其余内容不变。

上一条笔误：改动文件是 `templates/nav/index.php`，不是 `.html`。其余内容不变。

laoyang commented

2026-10-28 04:50:53 +00:00

已修复并部署。短语输入框 200.00px → 45.80px，与同页正常 input 差 0.0px，按钮回到同一行。回归 16 处 .inline-form 零偏离。commit eaa74bc。

已修复并部署。短语输入框 200.00px → 45.80px，与同页正常 input 差 0.0px，按钮回到同一行。回归 16 处 `.inline-form` 零偏离。commit `eaa74bc`。

laoyang closed this issue

2026-10-28 04:50:53 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: laoyang/FamilyBook#17