跳到内容
新问题

对这个项目有疑问吗?注册一个免费的GitHub帐户以打开一个问题,并联系其维护者和社区。

单击“注册GitHub”,表示您同意我们的服务条款隐私声明。我们偶尔会向您发送与帐户相关的电子邮件。

已经在GitHub上了?登录到您的帐户

搜索框垂直对齐 #36

关闭
美洲虎已打开此问题2023年1月12日·4条评论
关闭

搜索框垂直对齐 #36

美洲虎已打开此问题2023年1月12日·4条评论
标签
[Component]主题 模板、图案、CSS

评论

@杰维拉尔斯
复制链接

这是我的错,但分类页面和文章中搜索字段的垂直位置不同,并且太高了。

我们能把它下移,使它与标题第一句的底线对齐吗?

形象

@莱尔
复制链接
合作者

这是我的错,但分类页面和文章中搜索字段的垂直位置不同

没有办法在元素上设置这种对齐方式-现在搜索与标题容器的顶部对齐,并且两者都应该距离蓝色条80px。在任何页面上都应该是一样的。我确实看到Chrome中的文章有1px的变化,但不幸的是,这是一个像素划分问题。

我可以在搜索表单上添加额外的偏移间距,但当您滚动时,这也会将其向下推到页面上(例如,屏幕顶部与现在的80px之间将有105ish-px的间距)。它也无法解决像素分割问题。

看起来“WordPress Overview”的字体比页面标题小,这是我在设计中一定错过的东西——它们都是小时1所以它们在站点上的大小都相同。如果需要更改,这也意味着表单的自定义偏移量需要不同。

长话短说,试图实现一线基线对齐将非常脆弱,这真的很重要吗?

@比亚菲亚略
复制链接

可以让搜索框在标题的顶部或底部对齐吗?现在,两者都不是。

屏幕截图_2023-01-12

@莱尔
复制链接
合作者

啊,问题是光学对准与实际对准——元素是对准的,但由于标题的线条高度,它在光学上错位了。

截图2023-01-13,下午2点21分16分

从技术上讲,这与尝试与第一行基线对齐有相同的问题,因为这取决于单独元素(该标题)的字体大小和行高。

@杰维拉尔斯
复制链接
作者

如果我们可以在表单中添加一点偏移间距,这会让它看起来更好,而且在用户滚动时不会增加太多的垂直间距。

看起来“WordPress Overview”的字体比页面标题小,这一定是我在设计中错过的——它们都是h1,所以在站点上大小相同。如果需要更改,这也意味着表单的自定义偏移量需要不同。

我认为我们可以保持原样(我将更新Figma文件)。这些页面的标题使用h1是有意义的。

免费注册 在GitHub上加入此对话.已经有账户了吗?登录以发表评论
标签
[Component]主题 模板、图案、CSS
项目
还没有
开发

没有分支或拉请求

3名参与者