首页 前端知识 web前端之不一样的居中方式、解决tabBar选项卡居中问题、css支持嵌套、auto

web前端之不一样的居中方式、解决tabBar选项卡居中问题、css支持嵌套、auto

2024-02-29 12:02:27 前端知识 前端哥 380 70 我要收藏

MENU

  • 前言
  • html
  • style
  • 效果


前言

这里不能使用justify-content: center;,因为在小屏幕上,这种方式无法显示最前面的两个tabBar。


html

<div id="box" class="d_f o_a mt_50 mb_50 ml_20 mr_20">
    <div class="ws_n">tabBar 1</div>
    <div class="ws_n ml_20">tabBar 2</div>
    <div class="ws_n ml_20">tabBar 3</div>
    <div class="ws_n ml_20">tabBar 4</div>
    <div class="ws_n ml_20">tabBar 5</div>
    <div class="ws_n ml_20">tabBar 6</div>
    <div class="ws_n ml_20">tabBar 7</div>
    <div class="ws_n ml_20">tabBar 8</div>
    <div class="ws_n ml_20">tabBar 9</div>
</div>

style

#box {
    & :first-child {
        margin-left: auto;
    }

    & :last-child {
        margin-right: auto;
    }
}

效果

tabBarCenter1


tabBarCenter2

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2918.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!