jQuery移动控件组水平布局问题答案

【问题标题】：jQuery mobile controlgroup horizontal layout issuejQuery移动控件组水平布局问题
【发布时间】：2011-12-22 16:05:43
【问题描述】：

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

用户界面代码：

<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

【问题讨论】：

如果任一答案对您有帮助，请接受其中一个。谢谢。
当控件绝对窄到可以容纳时，我遇到了这个问题。似乎只发生在 chrome 浏览器上。

标签： jquery browser mobile jquery-mobile

【解决方案1】：

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

通过将 data-type="horizontal" 属性添加到控制组容器，您可以交换到浮动的水平样式组并排按钮并将宽度设置为仅足够大以适合内容。 （请注意，如果按钮数量或整体文本长度对于屏幕。）

这是link to the doc

【讨论】：

+！因为我认为这是原因
但这会导致我的按钮换行，即使它们远低于所需的大小（也仅在 chrome 浏览器中）

【解决方案2】：

我也有同样的问题，但通过在我的选择标签中添加data-mini="true" 来解决它而无需使用特殊的 CSS。

【讨论】：

【解决方案3】：

我看到您正在关注此处的示例代码：

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

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

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

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

你能像这样截断名字吗？

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

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

【讨论】：

【解决方案4】：

在这种情况下，您需要同时覆盖纵向和横向类。 jQM 试图变得智能，但它的计算对我来说效果不佳。只需在浏览器中使用 firebug，即瘦与宽，看看 jQM 如何随着宽度的变化应用类。当您切换到纵向或显示端口在浏览器中变窄时，它将添加和删除 .ui-field-contain 类。

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

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

.ui-controlgroup-controls{}

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

.ui-controlgroup-label{}

【讨论】：

【解决方案5】：

我添加了 display: inline-flex; ...尽管我不知道，但不要问我为什么。

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

【讨论】：

inline-flex 是弹性盒子模型的一部分，它还没有很好的整体支持（到目前为止已经有几个实现具有不同的属性名称，它们的行为都不同）。建议在规范敲定并一致实施之前不要使用灵活的盒子模型。

【解决方案6】：

在 Chrome 检查器中，.ui-field-contain 和 .ui-controlgroup-controls 的宽度似乎设置为 78%。删除此宽度确实会设置按钮，以便它们都显示在一行上。

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

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

【讨论】：

【解决方案7】：

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

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

确保任何容器都不会限制可供控制组 div 使用的空间。
尝试在对照组 div 中使用 ui-mini 类。这将使您的按钮更小。
给对照组一个负边距。有些人会称其为 hack，但它有效且有效。查看this article 了解更多信息。

2 和 3：

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

【讨论】：