1

我有一堆表格/键值数据，当用户单击第一个时，我总是显示一个项目，其余的显示，就像这个 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 将图标添加到标题项（“客户：Mario's Plumbing”）时，值字段，即“Mario's Plumbing”，与 <ul> 列表中的值字段不对齐，即“1- 800 亩房间”。

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

4

1 回答 1

0

看起来 jQuery 移动元素样式不能很好地结合在一起，在本例中是可折叠块和网格布局样式。

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

.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;
}

但这会将所有标题文本推左 40px。

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

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

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

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

于 2012-10-29T12:14:51.140 回答