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轴横向隐藏,而又往左排列优先”的全部内容。