Question

jQuery mobile 1.0似乎与水平类型的 controlgroup 存在布局问题。任何帮助表示赞赏。

UI代码：

<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>

jQuery Mobile Layou http://img835.imageshack.us/img835/470/jqmobilecontrol.jpg

Answer 1

根据jQuery Mobile文档（强调我的）：

通过将data-type =“horizontal”属性添加到控制组容器，您可以交换到浮动的水平样式组按钮并排设置，并将宽度设置为足够大以适应内容。 （请注意，如果这些将包含多行按钮数量或整体文字长度太宽屏幕。）

这是link to the doc

Answer 2

我有同样的事情，但是通过在我的选择标签中添加data-mini="true"，我可以在不使用特殊CSS的情况下解决它。

Answer 3

我看到你在这里遵循示例代码：

http://jquerymobile.com/demos/1.0/docs/forms/selects/

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

http://jsfiddle.net/jmHTc/1/

它是否嵌套在任何其他可能填充它并导致它显示的标签中？

你能截断这样的名字吗？

http://jsfiddle.net/jmHTc/3/

正如Brian所指出的那样，它也有可能只是大到适合屏幕

Answer 4

您需要覆盖此实例中的纵向和横向类。 jQM试图变得聪明，但它的计算并不适合我。只需使用firebug与浏览器skinny与wide一起查看jQM如何应用类作为宽度更改。当你切换到纵向或你的显示端口在浏览器中变瘦时，它将添加和删除.ui-field-contains类。

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

.ui-field-contains .ui-controlgroup-controls {}

的.ui-controlgroup-控制{}

.ui-field-contains .ui-controlgroup-label {}

的.ui-controlgroup标签{}

Answer 5

我添加显示：inline-flex; ...不要问我为什么虽然因为我不知道。

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

Answer 6

在Chrome检查器中，对于.ui-field-contain和.ui-controlgroup-controls，宽度设置为78％。删除此宽度会设置按钮，使它们全部显示在一行上。

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

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

Answer 7

虽然接受的答案是正确的，但它并没有解决问题。

我建议进行一次故障排除检查，以及两种解决方法。

确保所有容器都不限制controlgroup div可用的空间。
尝试使用控制组div中的ui-mini类。这将使您的按钮更小。
给对照组留下负边距。有些人会称之为黑客攻击，但它有效且有效。查看this article了解详情。

2和3：

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

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

7 个答案: