V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yuhangch
V2EX  ›  前端开发

关于 margin:auto 在高度不同时 x 方向的不同表现

  •  
  •   yuhangch ·
    yuhangch · 2023-06-20 14:50:12 +08:00 · 864 次点击
    这是一个创建于 550 天前的主题,其中的信息可能已经有所发展或是发生改变。

    真的是逼死我了。

    对于一个内容居中,宽度不撑满界面的页面,一般用 m-auto mx-auto 来做, 例如:

    https://hugo-paper.vercel.app/about https://hugo-paper.vercel.app/contact/

    https://bearblog.dev/discover/?newest=true (~395px) https://bearblog.dev/search/ (~400px)

    在页面不满一页,和超出一页(出现滚动条的时候),margin-left 的值不一样。。把在我这个分辨率下的值标在上面了。

    在静态页面之间,这个变化不太明显,还可以接受,但我在做一个 nuxt 的单页面应用,所以这几个像素的差别变得特别明显

    v 友们,这个问题有解没?

    6 条回复    2023-06-24 17:57:40 +08:00
    Rache1
        1
    Rache1  
       2023-06-20 15:31:06 +08:00
    有点意思。你这 about 和 concat 页面的页面宽度显示居然不一样,我这里 1920 的显示器,一个页面显示 1920 ,一个 1903
    Rache1
        2
    Rache1  
       2023-06-20 15:39:39 +08:00
    @Rache1 大意了,少去的是那个滚动条占用了 😣,正常情况了那就,

    你可以统一调整一下页面宽度(始终减去滚动条),或者不显示滚动条
    grit136907108
        3
    grit136907108  
       2023-06-20 15:50:53 +08:00
    谷歌 css 滚动条浮动
    yuhangch
        4
    yuhangch  
    OP
       2023-06-20 16:27:41 +08:00
    @Rache1 #2
    @grit136907108
    感谢两位👍😘
    loveDiu4ever
        5
    loveDiu4ever  
       2023-06-20 22:28:10 +08:00
    上面俩人能读懂你的描述,也挺牛逼的。
    theprimone
        6
    theprimone  
       2023-06-24 17:57:40 +08:00
    @princesswar721 看起来就是是否有滚动条导致的屏幕宽度问题,目前没有专门去处理过
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1261 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:48 · PVG 01:48 · LAX 09:48 · JFK 12:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.