H5W3
当前位置:H5W3 > HTML5 > 正文

【前端】拍移动端版想在header头实现这么个效果

最近在排移动端的版,想在header头部实现这么一个效果具体请看下方:

想要让头部的两边不动中间部分可以滚,如果直接有代码不甚感激

【前端】拍移动端版想在header头实现这么个效果

希望达到如图所示效果 两边不动中间可以平拖着滚这个排版可以实现吗?不希望推荐插件等

回答

横向滚动的要素就是

.nav{
  white-space:nowrap;
  overflow:auto
}

下面是示例

https://codepen.io/xboxyan/pe…

感谢邀请:

授人鱼不如授人以渔, 思路建议:

    header整体看作左中右布局, 左右元素在边缘位置固定,中间元素自适应剩余宽度, 在中间元素内部,使用子元素横向不折行的布局,使子元素总宽超过外层定宽,外层容器可使用 overflow属性控制是否可滑动,应该可以满足您的需求

本文地址:H5W3 » 【前端】拍移动端版想在header头实现这么个效果

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址