css控制内容溢出时横向滚动条

css 滚动 编程技术
发布日期 2022-12-16 更新日期 2023-01-17 阅读次数 84 文章字数 1.2k

首先要 display:block，然后是 width:100%，并且 nowarp，最后是 overflow-x: auto;

此外，我们希望在移动端时，隐藏滚动条，因为移动端一般是直接滑动，而不会拖拽滚动条。

::webkit-scrollbar { display:none; }

实例：

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>bootstrap 101</title>
    <link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <style>
        /* 隐藏滚动条 */
        #tabs::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>
    <h1>Hello，Bootstrap3！</h1>
    <div class="row">
        <div class="col-xs-12">
            <span id="tabs" style="display:block;width: 100%;white-space: nowrap;overflow-x: auto;">
                <a>1111111111111111111111</a>
                <a>33333</a>
                <a>555555555555555</a>
                <a>555555555555555</a>
                <a>555555555555555</a>
                <a>555555555555555</a>
                <a>555555555555555</a>
            </span>
        </div>
    </div>
</body>

</html>

文章作者: 朱丰华

文章链接: https://smart.52dixiaowo.com/blog/post-264.html

版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。

css 滚动

发表评论

相关推荐
朱丰华   |   1年前   |   < · iframe

让iframe嵌入的视频自适应 （100%宽度）？

122    评论    点赞
朱丰华   |   1年前   |   javascript · 滚动 · html

Javascript 显示当前滚动条滚动的百分比

73    评论    点赞
朱丰华   |   1年前   |   js · 滚动 · html

原生js实现顶部进度条效果

59    评论    点赞
朱丰华   |   1年前   |   html

一行代码实现html网页整体缩放

173    评论    点赞
朱丰华   |   1年前   |   高度 · 滚动 · 底部 · 加载 · 距离 · 原生 · js · Jquery · 下滑 · 文档

原生js、Jquery下滑到底部加载更多

66    评论    点赞
朱丰华   |   1年前   |   table · layout · 属性 · 表格 · 布局 · 单元 · CSS · 宽度 · 内容 · 自动

CSS table-layout 属性

69    评论    点赞
朱丰华   |   2年前   |   inline · block · css · 区别 · 独占 · 一行 · margin · padding · line

css 之 inline 和 inline-block的区别

76    评论    点赞
朱丰华   |   2年前   |   居中 · 高度 · li · 垂直 · 基线 · css · 高等 · 容器 · 可以 · 行高

让 li 的 a 居中，css行高等于容器高度可以垂直居中

60    评论    点赞
朱丰华   |   2年前   |   样式 · 用户 · 代理 · css · 填坑 · 浏览器

css填坑，用户代理样式表

185    评论    点赞
朱丰华   |   2年前   |   表格 · 撑开 · css · 防止 · 太大 · border · break · 考虑 · table

css防止表格太大撑开

44    评论    点赞
朱丰华   |   2年前   |   flex · direction · CSS · 属性 · 横向 · 竖向 · 布局 · row · column · reverse

CSS flex之flex-direction横向、竖向布局

110    评论    点赞
朱丰华   |   2年前   |   css · 顶端 · 对齐

css 顶端对齐

43    评论    点赞
{{item.author_name}}   |   {{new Date(item.date*1000).log()}}   |   {{it}} ·

{{item.title}}

{{item.uv}}    评论    点赞