使用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.效果