有没有办法在标准文本输入旁边放置一个前置选择菜单？

Question

我开始使用JQueryMobile并喜欢它。我想知道是否有办法在标准文本输入旁边放置一个前置选择菜单。

例如，如果文本输入是名称，那么前置选择将包含Mr，Mrs等。

编辑1：

我查看了control group docs以及类似按钮的情况，例如。

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Icon only</a>
    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Icon only</a>
</div>

但是，如果我使用像

这样的输入

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Icon only</a>
    <input type = "text" name = "some_input" id = "some_input">
</div>

输入重叠按钮会产生奇怪的结果。

编辑2：

我看过grids但看不到有一个div span 2网格的方法。 e.g。

<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b ui-block-c">Block C</div>
</div>

我已经尝试了上述内容，但它无法正常工作，例如

<div class="ui-grid-c">
    <div class="ui-block-a">
        <label for = "full_name">
            Name
            <select id = "honorific" data-mini="true" data-inline="true">
                <option value = "mr">Mr</option>
                <option value = "mrs">Mrs</option>
                <option value = "miss">Miss</option>
            </select>
        </label>
    </div>
    <div class="ui-block-b ui-block-c ui-block-d">
        <input type="tel" data-clear-btn="true" id = "full_name" name = "full_name">
    </div>
</div>

简单地显示全名标签下方的选择框，输入仅跨越看似一个单元格/块的内容 - 而不是网格的3个单元格/块。

Answer 1

从我看到的情况来看，控制组最适合使用按钮，复选框等。而不是您期望的组合。所以这里有两个解决方案。

不使用网格

您只需要将这两个元素作为内联块，如下所示：

.ui-select, .ui-input-text {
    display:inline-block
}

<强> Demo with No grids, No control group.

使用网格

你使用网格的方式是错误的。您将不得不使用两列网格，它将仅包含这两个类： ui-block-a＆amp; ui-block-b ，像这样：

<div class="ui-grid-b">
  <div class="ui-block-a">Block A</div>
  <div class="ui-block-b">Block B</div>
</div>

这将相应地缩放您的标记。这是HTML的样子：

<div class="ui-grid-a">
  <div class="ui-block-a" style="width:100px">
    <select name="select-choice-min" id="select-choice-min" data-mini="true">
       <option>Mr.</option>
       <option>Mrs.</option>
       <option>Ms.</option>
    </select>
  </div>
  <div class="ui-block-b">
    <input type="text" name="name" id="name" value="" placeholder="Enter Name" />
  </div>
</div>

<强> Demo with grids