6***@qq.com
6***@qq.com
  • 发布:2020-06-25 09:54
  • 更新:2020-06-25 09:54
  • 阅读:183

Mui nav遮挡了slider内容 如何解决呢

分类:MUI
css
<body>
	<style>  
		.mui-control-content {  
			background-color: white;  
			min-height: 750px;  
		}  
		.mui-control-content .mui-loading {  
			margin-top: 50px;  
		}  
		.pay_status{  
			display: inline;  
			height: 35px;  
			width: 35px;  
			float: right;  
		}  
		.pay_title{  
		}  
		.pay_money{  
			float: right;  
		}  
		.monthdiv p span{  
			display:block;  
			float:left;  
		}  
		.monthdiv img{  
			 display: block;  
			 float: left;  
			 height: 20px;  
			 width: 60px;  
			 border:0;  
			  
		}  
		.mui-ellipsis-2   
		{   
		    display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/   
		    overflow: hidden;   
		   
		    white-space: normal !important;   
		    text-overflow: ellipsis;   
		    word-wrap: break-word;   
		   
		    -webkit-line-clamp: 2; /*限制在一个块元素显示的文本的行数*/   
		    -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/   
		}   
	</style>  
	<header class="mui-bar mui-bar-nav">  
		  
		<h1 class="mui-title">报修列表</h1>  
			<img id="create_img" style="height: 38px;width: 100px;float:right" src="../images/yijianbaoxiu.png">  
		</header>  
	<div class="mui-content">  
		<div id="slider" class="mui-slider">  
			<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
				<a class="mui-control-item" href="#item1mobile">  
			全部  
		</a>  
				<a class="mui-control-item" href="#item2mobile">  
			未完成   
		</a>  
				<a class="mui-control-item" href="#item3mobile">  
			已完成  
		</a>  
			</div>  
			<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4" style="background-color: #ff8f1f; height: 2px;"></div>  
			<div class="mui-slider-group">  
				<div id="item1mobile" class="mui-slider-item mui-control-content mui-active" style=height: 100%;>  
					<div id="scroll1" class="mui-scroll-wrapper">  
						<div class="mui-scroll">  
								<div class="mui-card" style="margin-bottom: 35px;">  
									<ul class="mui-table-view"> 					  
										<li class="mui-table-view-cell">  
											<div class="monthdiv">  
												<p>  
													<span >单号:</span><span >11111</span>  
												</p>  
												<img  style="width: 55px;float: right;" src="../images/ndone.png"/>  
											</div>  
										</li>  
										<li class="mui-table-view-cell">  
											<div style="height: 40px;" class="mui-ellipsis-2 ">  
													这是报修内容sdasdasadaqweasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd  
											</div>  
										</li>  
										<li class="mui-table-view-cell">  
												<p >  
													<span>创建时间:</span><span >2020-4-3</span>  
													<span style="float: right;">地点:<span>A9asdasdasdassa</span></span>  
												</p>  
												<p >  
													<span >维修人员:</span><span >李师傅</span>  
													<span style="float: right;"><span></span></span>  
												</p>  
										</li>  
									</ul>  
								</div>  
								<div class="mui-card" style="margin-bottom: 35px;">  
									<ul class="mui-table-view"> 					  
										<li class="mui-table-view-cell">  
											<div class="monthdiv">  
												<p>  
													<span >单号:</span><span >11111</span>  
												</p>  
												<img  style="width: 55px;float: right;" src="../images/ndone.png"/>  
											</div>  
										</li>  
										<li class="mui-table-view-cell">  
											<div style="height: 40px;" class="mui-ellipsis-2 ">  
													这是报修内容sdasdasadaqweasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd  
											</div>  
										</li>  
										<li class="mui-table-view-cell">  
												<p >  
													<span>创建时间:</span><span >2020-4-3</span>  
													<span style="float: right;">地点:<span>A9asdasdasdassa</span></span>  
												</p>  
												<p >  
													<span >维修人员:</span><span >李师傅</span>  
													<span style="float: right;"><span></span></span>  
												</p>  
										</li>  
									</ul>  
								</div>  
								<div class="mui-card" style="margin-bottom: 35px;">  
									<ul class="mui-table-view"> 					  
										<li class="mui-table-view-cell">  
											<div class="monthdiv">  
												<p>  
													<span >单号:</span><span >11111</span>  
												</p>  
												<img  style="width: 55px;float: right;" src="../images/ndone.png"/>  
											</div>  
										</li>  
										<li class="mui-table-view-cell">  
											<div style="height: 40px;" class="mui-ellipsis-2 ">  
													这是报修内容sdasdasadaqweasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd  
											</div>  
										</li>  
										<li class="mui-table-view-cell">  
												<p >  
													<span>创建时间:</span><span >2020-4-3</span>  
													<span style="float: right;">地点:<span>A9asdasdasdassa</span></span>  
												</p>  
												<p >  
													<span >维修人员:</span><span >李师傅</span>  
													<span style="float: right;"><span></span></span>  
												</p>  
										</li>  
									</ul>  
								</div>  
								<div class="mui-card" style="margin-bottom: 35px;">  
									<ul class="mui-table-view"> 					  
										<li class="mui-table-view-cell">  
											<div class="monthdiv">  
												<p>  
													<span >单号:</span><span >11111</span>  
												</p>  
												<img  style="width: 55px;float: right;" src="../images/ndone.png"/>  
											</div>  
										</li>  
										<li class="mui-table-view-cell">  
											<div style="height: 40px;" class="mui-ellipsis-2 ">  
													这是报修内容sdasdasadaqweasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd  
											</div>  
										</li>  
										<li class="mui-table-view-cell">  
												<p >  
													<span>创建时间:</span><span >2020-4-3</span>  
													<span style="float: right;">地点:<span>A9asdasdasdassa</span></span>  
												</p>  
												<p >  
													<span >维修人员:</span><span >李师傅</span>  
													<span style="float: right;"><span></span></span>  
												</p>  
										</li>  
									</ul>  
								</div>  
								<div class="mui-card" style="margin-bottom: 35px;">  
									<ul class="mui-table-view"> 					  
										<li class="mui-table-view-cell">  
											<div class="monthdiv">  
												<p>  
													<span >单号:</span><span >11111</span>  
												</p>  
												<img  style="width: 55px;float: right;" src="../images/ndone.png"/>  
											</div>  
										</li>  
										<li class="mui-table-view-cell">  
											<div style="height: 40px;" class="mui-ellipsis-2 ">  
													这是报修内容sdasdasadaqweasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd  
											</div>  
										</li>  
										<li class="mui-table-view-cell">  
												<p >  
													<span>创建时间:</span><span >2020-4-3</span>  
													<span style="float: right;">地点:<span>A9asdasdasdassa</span></span>  
												</p>  
												<p >  
													<span >维修人员:</span><span >李师傅</span>  
													<span style="float: right;"><span></span></span>  
												</p>  
										</li>  
									</ul>  
								</div>  
						</div>  
					</div>  
				</div>  
				<div id="item2mobile" class="mui-slider-item mui-control-content">  
					<div id="scroll2" class="mui-scroll-wrapper">  
						<div class="mui-scroll">  
							<div class="mui-loading">  
								<div class="mui-spinner">  
								</div>  
							</div>  
							  
						</div>  
					</div>  

				</div>  
				<div id="item3mobile" class="mui-slider-item mui-control-content">  
					<div id="scroll3" class="mui-scroll-wrapper">  
						<div class="mui-scroll">  
							<div class="mui-loading">  
								<div class="mui-spinner">  
								</div>  
							</div>  
						</div>  
					</div>  

				</div>  
			</div>  
		</div>  
		  
	  
	</div>  
	  
	<nav class="mui-bar mui-bar-tab">  
		<a class="mui-tab-item " href="paylist.html">  
			<span class="mui-icon  " data-id="pay">  
				<img style="width: 28px;height: 28px;" src="../images/payiconn.png"/>  
			</span>  
			<span class="mui-tab-label" >缴费</span>  
		</a>  
		<a class="mui-tab-item mui-active" href="repairlist.html">  
			<span class="mui-icon  " data-id="pay">  
				<img style="width: 28px;height: 28px;" src="../images/repairicon.png"/>  
			</span>  
			<span class="mui-tab-label">报修</span>  
		</a>  
		<a class="mui-tab-item" href="my.html">  
			<span class="mui-icon " data-id="my">  
				<img style="width: 28px;height: 28px;" src="../images/myiconn.png"/>  
			</span>  
			<span class="mui-tab-label">我的</span>  
		</a>  
	</nav>
2020-06-25 09:54 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复