jQuery Mobile，可折叠键值网格：使用图标调整标题 50/50答案

【问题标题】：jQuery Mobile, collapsible key-value grid: sizing header 50/50 with iconjQuery Mobile，可折叠键值网格：使用图标调整标题 50/50
【发布时间】：2012-10-29 10:36:59
【问题描述】：

我有一堆表格/键值数据，当用户单击第一个时，我总是显示其中一个项目，其余的显示，例如this jsFiddle：

<div data-role="collapsible">
  <h3><div class="ui-grid-a">
      <div class="ui-block-a">Customer:</div>
      <div class="ui-block-b">Mario's Plumbing</div></div></h3>
  <ul data-role="listview">
  <li><div class="ui-grid-a">
      <div class="ui-block-a">Phone:</div>
      <div class="ui-block-b">1-800-MUS-ROOM</div></div></li>
  ...
  </ul>
</div>

但是，当 jQuery Mobile 将图标添加到标题项（“客户：马里奥的管道”）时，值字段，即“马里奥的管道”，不会与

我认为 jQuery 将图标与“客户：马里奥的管道”框并排放置 --- 这与我所看到的兼容：未对齐看起来大致像键字段的按钮宽度的 100%，并且值字段的按钮的 50%，考虑到我使用 ui-grid-a（它进行 50/50 拆分），我期望它。我希望该图标成为左侧 50% 的一部分，即在该框内而不是在该框旁边。我可以这样做吗？如何？这可能是简单的 CSS 和我是一个 CSS 延迟 :)

【问题讨论】：

检查您的标签，它们没有正确关闭
请提供问题的工作示例，可能使用jsFiddle
还有一个无与伦比的</a>，这可能是@Th0rndike 所暗示的
调整了代码，添加了 jsFiddle :-)
这行得通吗？ jsfiddle.net/g9g3v/3

标签： css jquery-mobile user-interface web icons

【解决方案1】：

看起来 jQuery 移动元素样式不能很好地结合在一起，在本例中是 collapsible block 和 grid layout 样式。

可折叠块添加图标和填充标题的样式。

.ui-btn-inner {
    padding:.6em 20px;
}

附加规则，更靠左填充（将文本从图标上移开）

.ui-collapsible-heading .ui-btn-inner, .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner {
    padding-left: 40px;
}

但这会将所有标题文本向左推 40 像素。

我能找到纠正不匹配的唯一方法是添加一个额外的规则来将第二个块移到左边。通过添加以下规则，文本再次排列。

.ui-collapsible-heading .ui-btn-inner .ui-grid-a .ui-block-b {
    margin-left:-10px;
}

在我的本地 Chrome 浏览器测试中，它似乎在不同的页面缩放级别上都能正常工作，但我还没有在移动设备上测试过。

编辑：此外，示例和小提琴中有一个错字，Mario's Plumbing 有 un-block-b 而不是 ui-block-b。

【讨论】：