Question

我在jQuery移动应用程序中有以下表格，问题是当我在低密度屏幕移动设备上测试此页面时，单选按钮choice3，choice6和复选框没有显示，保存按钮不在照片中出现的中心仅在低密度设备上发生，因为内容宽度大于设备宽度，我该如何解决这个问题呢？请帮帮我

我正在使用jQuery mobile 1.4.0，

enter image description here

我的鳕鱼，in jsfiddle

 <html>
 <head>
 <meta name="format-detection" content="telephone=no" />

 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0,    minimum-scale=1, width=device-width" />
 <script src="js/jquery-1.8.2.min.js"></script>
 <link href="css/jquery.mobile-1.4.0.min.css"     rel="stylesheet" type="text/css" /> 
 <script src="js/jquery.mobile-1.4.0.min.js"  type="text/javascript"></script>
</head>

<body>
<div data-role="page"    id="FormPage"   >
<div  data-role="header"    data-position="fixed"  data-tap-toggle="false" data-   fullscreen="false"  >
<a href="Main.html"  data-transition="none"  data-role="button" class="ui-btn ui-btn-  icon-left ui-btn-icon-notext  ui-icon-home ui-nodisc-icon "   style="text-decoration:none;"  ></a>
  <div  style="text-align:center;padding-top:15px;" > <font  color="white"   size="6px"   > Page1</font></div>
  </div> 
  <div data-role="content"   >
  <form   id="Info_Form"    >
  <ul   data-role="listview"   data-inset="true"     id=" FormList"   >
  <li>
  <legend ><font  size="6px"  >  Select a choice </font></legend>
  <BR><BR><BR>
  <fieldset  data-iconpos="right" > 
  <div class="ui-grid-b" >
  <div class="ui-block-a " > 
  <input type="radio"   id="CH1"    name="radio-group-1"  value="choice1" />
  <label  for="CH1"    data-inline="true"   style=" text-  align:right;float:right;">choice1</label>
  </div>
  <div class="ui-block-b"  >
  <input  type="radio"    id="CH2"    name="radio-group-1"  value="choice2" />
  <label  for="CH2"    data-inline="true" style=" text-  align:right;float:right;">choice2</label>
  </div>

  <div class="ui-block-c" >
  <input type="radio"     name="radio-group-1"  id="CH3" value="choice3"   />
  <label  for="CH3"    data-inline="true" style=" text- align:right;float:right;">choice3</label>
  </div>
  <div class="ui-block-a">
  <input type="radio"     name="radio-group-1"   id="CH4"  value="choice4" />
  <label  for="CH4"  data-inline="true"  style=" text- align:right;float:right;">choice4</label>
  </div>

  <div class="ui-block-b">
  <input type="radio"     name="radio-group-1"  id="CH5"  value="choice5" />
  <label  for="CH5"  data-inline="true"   style=" text- align:right;float:right;">choice5</label>
  </div>
  <div class="ui-block-c">
  <input type="radio"     name="radio-group-1"  id="CH6"  value="choice6" />
  <label  for="CH6"  data-inline="true"  style=" text-align:right;float:right;">choice6</label>
  </div>
  </div>
 </fieldset>
 </li>

 <li >   

 <div class="ui-grid-a ui-field-contain" >

 <div class="ui-block-a"   style="width:80% !important;padding-right:29px !important;">

 <font size="5px" color="#002a4a" style="text-align:right;float:right;font-weight:normal;white-space: normal;" > Check To Enable Daily Notifications </font>

 </div>

 <div class="ui-block-b"  style="text-align:right;float:right;right: 0;margin-right: 0  !important;width:20% !important;">

 <fieldset   data-role="controlgroup"  data-iconpos="right" style="padding-top:7px;"  >

 <input type="checkbox" name="CheckB" id="CheckB"   data-iconpos="notext" />
 <label for="CheckB"  data-inline="true"></label>

 </fieldset>
 </div>

 </div>
<BR><BR>
 </li>
 <li > 
  <div   class="ui-btn ui-input-btn"style=" text-align:center;" >                                                   
  <input type="button"     id="saveBtn"    data-inline="true" value="Save"  data-icon="check" data-iconpos="right" />

  </div>    
  </li>
  </ul>
 </form>
 </div>
 </div>
 </body>
 </html>


 [1]: http://jsfiddle.net/nW63H/

页面内容没有完全出现在jQuery mobile 1.4.0中

0 个答案: