已标准化字体但搜索栏与创建按钮字体大小仍不一致，求解决方案

一、统一字体大小 #

1. 明确指定创建按钮文本的字体大小
   当前.create-container未设置字体大小，会继承父元素或浏览器默认值，导致跨页不一致。添加以下样式：

   .create-container {
     /* 保留原有样式 */
     font-size: 16px; /* 和body、搜索栏字体大小统一 */
     font-family: 'Roboto', Arial, sans-serif; /* 统一字体族 */
   }
   

2. 重置浏览器默认样式
   浏览器对表单元素（如input）有默认字体样式，添加全局重置确保一致性：

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box; /* 统一盒模型，避免padding/边框撑大元素 */
     font-family: inherit; /* 继承body的字体族 */
     font-size: inherit; /* 继承body的字体大小 */
   }
   

   将这段代码放在CSS最顶部，覆盖浏览器默认样式。

3. 确保所有页面共享相同基础样式
   检查所有页面是否引入了同一个基础样式文件（如home.css），避免不同页面使用不同的字体配置。

二、修复搜索栏长度超出问题 #

1. 调整顶部栏布局，适配侧边栏
   当前.top-bar设置width:100%但未考虑左侧固定侧边栏的宽度，导致内容被遮挡或超出。修改.top-bar样式：

   .top-bar {
     /* 保留原有样式 */
     width: calc(100% - 240px); /* 减去侧边栏宽度240px */
     left: 240px; /* 从侧边栏右侧开始布局 */
   }
   

2. 确保搜索栏盒模型正确
   给.search-bar添加盒模型设置，防止padding和边框额外增加宽度：

   .search-bar {
     /* 保留原有样式 */
     box-sizing: border-box;
   }
   

三、验证与测试 #

• 刷新所有页面，检查搜索栏和创建按钮的字体大小是否一致
• 确认搜索栏宽度在不同屏幕尺寸下都不会超出预期
• 切换不同页面，验证创建按钮字体大小无差异

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