首页 javaWEB 纯CSS实现多个便签在一行展示,拖动滚动

纯CSS实现多个便签在一行展示,拖动滚动

div <h2>请注意需要在移动端预览,PC端拖拽无效果</h2> <div class=…

div

<h2>请注意需要在移动端预览,PC端拖拽无效果</h2>
<div class="box">
    <span style="flex: 1;">保障类型</span>
    <p class="item">
        <span>标签1</span>
        <span>标签2</span>
        <span>标签3</span>
        <span>标签4</span>
        <span>标签5</span>
        <span>标签6</span>
        <span>标签7</span>
        <span>标签8</span>
        <span>标签9</span>
        <span>标签10</span>
        <span>标签11</span>
        <span>标签12</span>
        <span>标签13</span>
        <span>标签14</span>
        <span>标签15</span>
        <span>标签16</span>
        <span>标签17</span>
        <span>标签18</span>
        <span>标签19</span>
        <span>标签20</span>
        <span>标签21</span>
        <span>标签22</span>
        <span>标签23</span>
        <span>标签24</span>
        <span>标签25</span>
        <span>标签26</span>
        <span>标签27</span>
        <span>标签28</span>
    </p>
</div>

css

 .box {
    width:600px;
    height:40px;
    overflow-y:hidden;
    overflow-x:auto;
    white-space:nowrap;
    margin:100px;
    background-color:aqua;
}
.box::-webkit-scrollbar {
    display:none;
}
.item {
    width:384px;
    height:216px;
    display:inline-block;
}

 

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

为您推荐

nodejs 整理记录

nodejs 整理记录

下载包 https://blog.csdn.net/m0_59878114/article/details/120274...
websocket测试html

websocket测试html

<!DOCTYPE html> <html> <head> <meta cha...
bigdemical两个数比较大小

bigdemical两个数比较大小

/*int result = bigdemical1.compareTo(bigdemical2) result = -...
Beetl2.7 中文文档

Beetl2.7 中文文档

Beetl目前版本是2.7.23,相对于其他java模板引擎,具有功能齐全,语法直观,性能超高,以及编写的模板容易维护等...
The remote endpoint was in state [TEXT_FULL_WRITING] which is an invalid state for called method异常处理

The remote endpoint was in state [TEXT_FULL_WRITING] which is an invalid state for called method异常处理

使用websocket发现的坑: The remote endpoint was in state [TEXT_FULL...
返回顶部