ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

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

2026/9/18 6:26:22 拓冰建站 浏览量
web前端之不一样的居中方式、解决tabBar选项卡居中问题、css支持嵌套、auto

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