css—在某个区域可水平滑动_cssdisplay布局滑动-CSDN博客

本文链接：https://blog.csdn.net/weixin_61710685/article/details/141899558

竖向

 <div class="demo">
        <div>语文</div>
        <div>数学</div>
        <div>音乐</div>
        <div>历史</div>
        <div>地理</div>
        <div>政治</div>
 </div>
  .demo {
    height: 92px; //指定可滑动区域高度
    width: 44px;
    overflow-y: auto; //出现垂直滚动条
    margin: 30px;
    }
    .demo div {
      border: 1px solid red;
    }

横向

 <div class="demo1">
        <div>语文</div>
        <div>数学</div>
        <div>音乐</div>
        <div>历史</div>
        <div>地理</div>
        <div>政治</div>
      </div>
  .demo1 {
    height: 92px;
    width: 97px;//指定可滑动区域宽度
    overflow: hidden; //超出隐藏
    white-space: nowrap;//超出不换行
    overflow-x: auto;//出现水平滚动条
    margin: 30px;
    }
   .demo1 div {
      display: inline-block;
      border: 1px solid red;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <style type="text/css">
    body {
      background-color: aquamarine;
    }

    .tbplan {
      display: flex;
      flex-wrap: nowrap;
      height: 1.2rem;
      width: 100%;
      overflow: hidden;
      overflow-x: auto;
    }

    .tbplan_product {
      text-align: center;
      padding: 0.14rem 0.2rem;
      border: 1px solid #4B8EFF;
      font-size: 0.26rem;
      background: #FFF;
      border-radius: 0.1rem;
      display: flex;
      align-items: center;
    }

    .tbplan_product::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
      width: 0.15rem;
      height: 0.15rem;
      background: #FFF;
      border: 1px solid #006ECD;
      border-style: none none solid solid
    }

    .tbplan_product_blue {
      color: #4B8EFF;
      height: 1.03rem;
      display: flex;
      flex: 0 0 2.54rem;
      margin: 0 0.2rem 0 0;
      position: relative;
      font-weight: 600;
    }

    .tbplan_product_grap {
      height: 1.03rem;
      display: flex;
      flex: 0 0 2.54rem;
      margin: 0 0.2rem 0 0;
      position: relative;
      background-color: antiquewhite;
      border-radius: 0.1rem;
    }

    .tbplan_product_grap_div {
      display: flex;
      align-items: center;
      padding: 0.14rem 0.2rem;
    }

    ::-webkit-scrollbar {
      height: 0.1px;
      background-color: transparent;
    }
  </style>
</head>

<body>

  <div class="tbplan">
    <div class="tbplan_product_blue">
      <div class="tbplan_product">优越人生宁静致远（中秋节）快乐</div>
    </div>
    <div class="tbplan_product_grap">
      <div class="tbplan_product_grap_div">优越人生宁静致远（中秋节）快乐</div>
    </div>
    <div class="tbplan_product_grap">
      <div class="tbplan_product_grap_div">优越人生宁静致远（中秋节）快乐</div>
    </div>
    <div class="tbplan_product_grap">
      <div class="tbplan_product_grap_div">优越人生宁静致远（中秋节）快乐</div>
    </div>
    <div class="tbplan_product_grap">
      <div class="tbplan_product_grap_div">优越人生宁静致远（中秋节）快乐</div>
    </div>
  </div>

</html>

参考文章：http://t.csdnimg.cn/7wOKT