jQuery移动控制组水平布局问题

jQuery mobile 1.0似乎存在水平类型的控制组的布局问题。感谢您的帮助

用户界面代码：

<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Date of Birth</legend>

<select name="SelDateOfBirthMonth" id="SelDateOfBirthMonth">
    <option value="">Month</option>
    <option value="jan">January</option>
    <option value="feb">February</option>
    <option value="mar">March</option>
</select>

<select name="SelDateOfBirthDay" id="SelDateOfBirthDay">
    <option value="">Day</option>
          <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select name="SelDateOfBirhtYear" id="SelDateOfBirhtYear">
    <option value="">Year</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2019">2009</option>
</select>
</fieldset>

出生日期
月
一月
二月
前进
白天
1.
2.
3.
年
2011
2010
2009

---

根据jQuery移动文档（重点）：

通过向控制组添加data type=“horizontal”属性 容器，则可以切换到浮动容器的水平样式组 并排按钮，并将宽度设置为仅足以容纳 内容（请注意，如果 按钮数或整个文本长度对于 屏幕。）

---

以下是我看到的示例代码：

当我在这里复制它时，它看起来很好：

它是否嵌套在任何其他标记中，这些标记可能会填充它并导致它显示为这样

你能像这样删掉这些名字吗

---

正如Brian指出的那样，它也有可能太大而无法适应屏幕

在本例中，您需要覆盖纵向和横向类。jQM试图变得聪明，但它的计算结果对我来说不太合适。只需将firebug与您的浏览器skinny vs.wide一起使用，就可以了解jQM在宽度变化时是如何应用这些类的。当您切换到纵向或浏览器中的显示端口变薄时，它将添加和删除包含类的.ui字段

您希望覆盖这些的宽度和显示（内联块），如果将它们全部设置为相同，您将看到我的意思：

.ui字段包含.ui控制组控件{}

.ui控制组控件{}

.ui字段包含.ui控制组标签{}

---

.ui controlgroup label{}

我也有同样的问题，但通过在我的选择标签中添加

data mini=“true”

，我能够在不使用特殊CSS的情况下解决它。

我添加了display:inline flex。。。不要问我为什么，因为我不知道

<span id        = "blah"
      data-role = "controlgroup" 
      data-type = "horizontal"  
      style     = "display: inline-flex;"
    >
  <a ...>
  <a ...>
</span>

---

在Chrome inspector中，.ui字段包含和.ui控件组控件的宽度似乎设置为78%。删除此宽度会设置按钮，使其全部显示在一行上

我可以通过在自己的.css文件中添加以下规则来解决这个问题：

.ui-field-contain .ui-controlgroup-controls {
    width:100%;
}

---

虽然公认的答案是正确的，但它并不能解决问题

我将建议一个故障排除检查和两个解决方法

确保任何容器都没有限制controlgroup div可用的空间

尝试使用控制组div中的

ui mini

类。这将使按钮变小

给对照组留一个负余量。有些人会称之为黑客，但它是有效的。查看更多信息

2和3：

<div data-role="controlgroup" data-type="horizontal" class="ui-mini" style="margin-right: -10px;">
    <!-- buttons and whatnot... -->
</div> 

+！我认为这就是原因，但这会导致我的按钮被包裹，即使它们的大小远远低于所需的大小（也仅在chrome浏览器中），如果其中一个答案有助于您接受其中一个，请接受。谢谢。我遇到这个问题时，控制肯定是窄到适合。似乎只有在chrome浏览器上才会出现。inline-flex是flexible box模型的一部分，它还没有很好的整体支持（到目前为止，已经有几个实现具有不同的属性名称，它们的行为都不同）。建议在规范敲定并一致实施之前，不要使用柔性箱模型。