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

Love The Way You Lie 2022-07-26 04:05 114阅读 0赞

如果直接用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.效果

![20160406152653864][]

[20160406152653864]: /images/20220724/99b06b17ca3249f5a52a7afd8788cbe1.png