使用JQuery Mobile时,解决fieldset在页面缩小时不会换行

如果直接用fieldset,页面在缩小宽度时,文字跟 按钮会换行显示,为了解决这个问题,用下面的方式来解决


1.样式

<span style="font-size:14px;"><style>
		.ui-bar-f 
		{
			color: white;
			background-color: #1BA0E1;
		}
		
	
		
		.a-a
		{
			width: 15%;
			margin-top: 14px;
			float: left;
		}
		
		.b-b
		{
			width: 15%;
			margin-top: 20px;
			float: left;
		}
		
		.c-c
		{
			width: 70%;
			margin-top: 0px;
			float: left;
		}
		
		.d-d
		{
			width: 30%;
			margin-top: 18px;
			float: left;
		}
	
	</style></span>

2.将 图片、文字、按钮放入不同的div中, c:forEach 标签可以获得后台 的数据,后台要放入request中

request.setAttribute("schoolList", list);

<div data-role="content" data-theme="a">
				
					<fieldset data-role="fieldcontain">
				       <div class="a-a">
				        	<img src="images/wechat/school.png"> 
				        </div>
				        <div class="b-b">
				        	<label for="school">学校</label>
				        </div>
				        <div class="c-c">
				        <select name="school" id="school" data-native-menu="false">
				         	<option value="">请选择</option>				         	
			         	    <c:forEach var="i" items="${requestScope.schoolList}">
			         	  	    <option value="${i[0]}">${i[1]}</option>
			        	    </c:forEach>
				        </select>
				        </div>
				        
				        <div class="a-a">
				       		 <img src="images/wechat/campus.png">
				        </div>
				         <div class="b-b">
				       		<label for="campus">校区</label>
				        </div>
				         <div class="c-c">
				        <select name="campus" id="campus" data-native-menu="false">
				         	<option value="">请选择</option>
				        </select>
				        </div>
				        
				        <div class="a-a">
				        	<img src="images/wechat/room.png">
				        </div>
				        <div class="b-b">
				        	<label for="roomId">房间</label>
				        </div>
				         <div class="c-c">
				        <select name="roomId" id="roomId" data-native-menu="false">
				        	<option value="">请选择</option>
				        </select>
				        </div>
				        
				        <div class="d-d">
				        	<label for="roomSelected">选择的房间</label>
				        </div>
				         <div class="c-c">
				        <input style="text-align:center" type="text" name="roomSelected" id="roomSelected" value="" readonly="readonly"/>
				        </div>
			        </fieldset>
					
				
			</div>

3.效果


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值