请输入关键字词

最新搜索
1hbuilder 2 3漫威 4 5人工智能 6 7输入 8
热门搜索
1seo 2hbuilder 3头条号 4网站 5帝国 6cms 7搜索 8公共

利用前端CSS使内容超出给定元素大小范围后自动出现滚动条

个人博客 2021-06-05 14:50 CSS 36
利用前端CSS使内容超出给定元素大小范围后自动出现滚动条主要的是在这两个部分overflow:auto;//父元素添加white-space:nowrap;//子元素添加html部分<!DOCTYPEhtml><html><h...

利用前端CSS使内容超出给定元素大小范围后自动出现滚动条

主要的是在这两个部分

overflow:auto;//父元素添加
white-space:nowrap;//子元素添加

html部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>利用前端CSS使内容超出给定元素大小范围后自动出现滚动条</title>
</head>
<body>
<div class="nr">
    <ul>
        <li>栏目名</li>
        <li>栏目名</li>
        <li>栏目名</li>
        <li>栏目名</li>
        <li>栏目名</li>
        <li>栏目名</li>
        <li>栏目名</li>
        <li>栏目名</li>
        <li>栏目名</li>
        <li>栏目名</li>
        <li>栏目名</li>
    </ul>
</div>
</body>
</html>

css部分

.nr{width:500px;margin:20px auto 0;overflow:auto}
.nr ul{white-space:nowrap;}
.nr li{display:inline-block;}

觉得滚动条太大?试试这个css让滚动条变成自己想要的样式:

.nr::-webkit-scrollbar{height:5px;}//横向添加height,竖向添加width
.nr::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background-color:rgba(0,0,0,0.2);}
.nr::-webkit-scrollbar-thumb:hover{background-color:#888;}
.nr::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius:0;background-color:rgba(0,0,0,0.1);}

注意:调整子元素里面的版块为display:inline-block;浮动情况下不生效。

本文链接:利用前端CSS使内容超出给定元素大小范围后自动出现滚动条 https://www.cbing.net/daima/18.html

特别声明:本文为陈斌博客站原创文章,版权归属本站所有,若转载请注明出处。若本文标注错误或无意侵犯到您的知识产权作品或损害了您的利益,烦请发送邮件与我们取得联系4956106#qq.com,我们会及时修改或删除。

手机扫描左侧二维码查看本文信息!

本文标题:利用前端CSS使内容超出给定元素大小范围后自动出现滚动条

本文地址:https://www.cbing.net/daima/18.html

分享到:
wz1

文章评论

来说两句吧...共有0条评论

celan1