手机顶部滑动tab

1. 实现效果

手机顶部滑动tab的效果是:手机顶部有可以滑动的选项,点击选项页面出现相应的内容。

2. 操作步骤

(1) 在页面上制作标签与内容分离的tab,效果如下图:

(2) 进入标签编辑界面,在列表上右键选择列表操作→列表设置→左对齐内联列表。

(3) 设置列表<ul>的inline-style(宽度数值根据需求设置),如下图:

(4) 在列表外套一个<div>标签,并设置其inline-style,如下图:

当元素宽度大于父元素时,父元素设置为显示滚动条,这样就能滑动。

3. 视频演示