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

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 跨越 2 个网格的方法。例如

<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

据我所知，控制组最适合使用按钮、复选框等。而不是您期望的组合。所以这里有两个解决方案。

不使用网格

你只需要把这两个元素做成一个inline-block，像这样：

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

Demo with No grids, No control group.

使用网格

您使用网格的方式是错误的。您必须使用 两列 网格，它只有这两个类：ui-block-a & 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