使定位position:absolute样式水平滚动的方法

最新推荐文章于 2022-07-13 20:44:45 发布

Eveweiscsdn

最新推荐文章于 2022-07-13 20:44:45 发布

阅读量1k

点赞数 1

分类专栏： css3 文章标签：定位 css absolute 水平滚动

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/107610695

版权

css3 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

平常水平滚动其实挺好实现的主要是给容器添加这两行代码实现：

white-space: nowrap;
  overflow-x: scroll;

但是加了个定位就不太行了，定位和这两行不在同一个容器中，所以要在这个容器的外层再加一个包裹的容器用来定位，里面那个容器就直接用来实现水平滚动。

先来看看效果图：

<html>
  <body>
    <div class='div-outer'>
      <div class='outer'>

       <div class="top">使定位position:absolute样式水平滚动的方法</div>
        <!--         这个容器用来定位 -->
      <div class='inner'>
<!--         这个用来实现水平滚动 -->
        <ul>
        <li>我是一个item</li>
          <li>我是一个item</li>
          <li>我是一个item</li>
          <li>我是一个item</li>
          <li>我是一个item</li>
          <li>我是一个item</li>
          <li>我是一个item</li>
          <li>我是一个item</li>
          
      </ul>
      </div>
    </div>
    </div>
    
  </body>
</html>

.div-outer{
  padding:10px 200px;
  height:300px;
}


.outer{
  position:relative;
  width:100%;
  height:100%;
  border:1px solid #000;
  overflow:hidden;
}

.inner{
  width:100%;
  position:absolute;
  bottom:20px;
}

ul{
  padding-left: 32px;
   white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  
}
li{
  padding: 8px 14px;
    height: 36px;
    margin-right: 10px;
  display:inline-block;
}

公众号

欢迎大家关注我的公众号：石马上coding，一起成长

Eveweiscsdn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使定位position:absolute样式水平滚动的方法

平常水平滚动其实挺好实现的主要是给容器添加这两行代码实现：white-space: nowrap; overflow-x: scroll;但是加了个定位就不太行了，定位和这两行不在同一个容器中，所以要在这个容器的外层再加一个包裹的容器用来定位，里面那个容器就直接用来实现水平滚动。先来看看效果图：<html> <body> <div class='div-outer'> <div class='outer...
复制链接

扫一扫