mui拓展：flex布局：如何设置x轴横向隐藏，而又往左排列优先

最新推荐文章于 2021-10-31 22:48:45 发布

草巾冒小子

最新推荐文章于 2021-10-31 22:48:45 发布

阅读量2.9k

点赞数

分类专栏： MUI踩坑篇

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

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

版权

MUI踩坑篇专栏收录该内容

30 篇文章 7 订阅

订阅专栏

flex布局：如何设置x轴横向隐藏

使用了mui框架的组件，发现只能居中显示，不能靠左排列，特意修改了一下代码，实现了内容过少，居左排列；内容溢出，可左右滑动的功能
可以单独分离代码，适用于非框架开发。（植入性的 · 兼容性:很好）

<!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: ;}
	.mui-card {
	    font-size: 14px;
	    position: relative;
	    overflow: hidden;}
    .mui-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;
	}
    
    .gzbg {
    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="mui-card scroll-gz" style="border-radius: 0;margin: 0;box-shadow:none;width: 100%;">
						<div class="mui-card-footer overflw-x" id="tagjsp">
							<a class="mui-btn gzbg" onclick="webjsp(28,'tag')" id="gzbg_28">考试经验</a>
							<a class="mui-btn gzbg" href="">辅导精华</a>
							<a class="mui-btn gzbg on" href="">考试动态</a>
							<a class="mui-btn gzbg" href="">考试大纲</a>
							<a class="mui-btn gzbg" href="">考试时间</a>                
							<a class="mui-btn gzbg" href="">取证事项</a>                
							<a class="mui-btn gzbg" href="">复审查验</a>                 
						</div>
					</div>
	</body>
</html>

以上就是关于“ mui拓展：flex布局：如何设置x轴横向隐藏，而又往左排列优先”的全部内容。

草巾冒小子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mui拓展：flex布局：如何设置x轴横向隐藏，而又往左排列优先

flex布局：如何设置x轴横向隐藏<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=...
复制链接

扫一扫

专栏目录