Jquery mobile 在jquery mobile和dispaly phone number字段的同一行上有2个单选按钮

我正在jquerymobile中尝试表单设计。在我的表格中，我想在同一行上显示两个单选按钮。我尝试使用

display:inline

，但不起作用。

---

第二个是我在jquery移动文档中搜索的，用三个文本字段（分隔电话号码）显示电话号码字段，但我没有得到这样的设计。关于如何在jquery mobile中实现这一点的任何建议。

我认为您正在寻找的解决方案可能涉及内容网格

文件：

我已经为单选按钮和文本框制作了一些HTML模型，但是您的情况可能有点不同

看看这个例子：

此外，请查看此文档页面，了解（电话）号码的文本输入：

在jQuery Mobile中，您可以使用现有和新的HTML5输入类型，例如 密码、电子邮件、电话、号码等

---

从这里：

我找到了如何通过三个文本字段（如xxx xxx xxxx）获取电话号码的解决方案。

---

演示：

单选按钮需要非常积极的显示：内联！重要的。。。此外，您还必须调整这些文本框的高度，使它们对齐。这里有两个版本供您选择，一个是普通按钮，另一个是迷你们

祝你好运

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}
<div data-role="page" class="type-home">

.floatleft{
浮动：左；
}
.对{
浮动：对；
}
.forceinline{/*阻止fieldcontain执行块操作*/
显示：内联！重要；
}
.textwidth{/*限制输入字段的宽度*/
宽度：80px；
}
.closespacing{/*控制元素之间的间距*/
保证金：0px 5px 0px 0px；
}
.bigselect{/*使用大按钮进行选择*/
填充：0px；
保证金：2px 5px 0px 0px；
}
.biginputheight{/*将文本输入高度与大按钮匹配*/
填充顶部：10px！重要；
填充底部：12px！重要；
}
.miniinputheight{/*将文本输入高度与迷你按钮匹配*/
填充顶部：5px！重要；
填充底部：5px！重要；
}

第一行li

大按钮
更多文本
A1
地下一层


小按钮
AA
BB
e3文本
位于右侧

最后一行li

<ul data-role="listview">
  <li  data-role="fieldcontain">first LI line</li>
  <li  data-role="fieldcontain">

    <div class='floatleft closespacing'>
        Big Buttons<br>More Text
    </div>
    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal">
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">A1</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">B1</label>
        </fieldset>
      </div>
    </div>

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="#1" class='biginputheight'></input>
    </div>  

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="#2" class='biginputheight'></input>
    </div>  

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="#3" class='biginputheight'></input>
    </div>  

    <div  class='floatright textwidth'>
      <input type="text" placeholder="right" class='biginputheight'></input>
    </div>  

  </li>
  <li  data-role="fieldcontain">

    <div class='floatleft closespacing'>    
        Small Buttons
    </div>

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">AA</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">BB</label>
        </fieldset>
      </div>
    </div>

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="s1" class='miniinputheight'></input>
    </div>  

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="s2" class='miniinputheight'></input>
    </div>  

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="s2" class='miniinputheight'></input>
    </div>  


    <div class='floatright closespacing'>
      <div  class='floatright closespacing'>    
        e3 Text<br>on right
      </div>
      <div  class='floatright textwidth'>
        <input type="text" placeholder="e3" class='miniinputheight'></input>
      </div>  
    </div>
  </li>
  <li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->