（自定义组件）通用- X轴横向：溢出滚动（含代码）- 案例篇

最新推荐文章于 2023-04-26 17:05:49 发布

草巾冒小子

最新推荐文章于 2023-04-26 17:05:49 发布

阅读量911

点赞数

分类专栏： CSS 3 css hack

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/105750862

版权

CSS 3 同时被 2 个专栏收录

60 篇文章 3 订阅

订阅专栏

css hack

7 篇文章 0 订阅

订阅专栏

（自定义组件）通用- X轴横向：溢出滚动（含代码）- 案例篇

移动端和pc端通用

效果截图：

在这里插入图片描述

实例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
<style type="text/css">
	body{background: ;}
	.wither-card {
	    font-size: 14px;
	    position: relative;
	    overflow: hidden;}
    .wither-card-footer{
	    color: #6d6d72;
	    position: relative;
	    min-height: 44px;
	    padding: 10px 15px;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    flex-direction: row ;
	    flex-wrap: nowrap;
	    -webkit-box-pack: justify;
	    -webkit-justify-content: flex-start;
	    justify-content: flex-start;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;}
    .overflw-x {
	    overflow-x: scroll;
	    border-radius: 0;
	}
    
    .witag {
    background: #FFF;
    color: #999999;
    border-color: #999999;
    padding: 0 10px;
    font-size: 12px;
    height: 20px;
    line-height: 18px;
    margin-right: 10px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
    font-weight: 400;}
		</style>
	</head>
	<body>
		<div class="wither-card" style="border-radius: 0;margin: 0;box-shadow:none;width: 100%;">
			<div class="wither-card-footer overflw-x">
				<a class="mui-btn witag" onclick="webjsp(28,'tag')" id="witag_28">考试经验</a>
				<a class="mui-btn witag" href="">辅导精华</a>
				<a class="mui-btn witag on" href="">考试动态</a>
				<a class="mui-btn witag" href="">考试大纲</a>
				<a class="mui-btn witag" href="">考试时间</a>                
				<a class="mui-btn witag" href="">取证事项</a>                
				<a class="mui-btn witag" href="">复审查验</a>                 
			</div>
		</div>
	</body>
</html>

以上就是关于“ 移动端（自定义组件）- X轴横向：溢出滚动（含代码）- 案例篇 ” 的全部内容。

草巾冒小子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（自定义组件）通用- X轴横向：溢出滚动（含代码）- 案例篇

移动端（自定义组件）- X轴横向：溢出滚动（含代码）- 案例篇效果截图：实例代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,...
复制链接

扫一扫