Question

我正在动态创建一个jquery移动列表视图，并希望在具有特定间距的同一行上具有不同的元素。然后，每个元素将在每个后续列表项中排成一行（它看起来像表格）。我可以使用span来在元素之间添加边距，但问题是当长度文本不同时它会移动元素。

这是我用来创建listview的代码

＆＃13;

if (i == 0) {
content = "<div data-role='collapsible' data-theme='a'><h3>Date<span style='float:right;' class='ui-btn-up-c  ui-btn-corner-all cnt'>Count</span></h3><ul data-role='listview' data-theme='b'><li><a rel='external' href='#'><span style='margin-right:30px'>Test Text</span>Next Element</a></li>"
temprec = rec[1];
}
else {
if (rec[1] == temprec) {
content = content + "<li><a rel='external' href='#'><span style='margin-right:30px'>Long Long Test Text</span>Next Element</a></li>"
}
else {
content = content + "</ul></div><div data-role='collapsible' data-theme='a'><h3>Date<span style='float:right;' class='ui-btn-up-c  ui-btn-corner-all cnt'>Count</span></h3><ul data-role='listview' data-theme='b'><li><a rel='external' href='#'><span style='margin-right:30px'>Text</span>Next Element</a></li>"
temprec = rec[1];
}
}

＆＃13;

以下是输出的示例电流（我试图附上图片）...

文字下一个元素

Long Long Test Text Next Element

我想要所有＆＃34; Next Element＆＃34;文本到列中的阵容。有没有办法做到这一点？谢谢！

Answer 1

如果没有输出HTML，很难知道如何给你提供最好的建议，但由于这些数据显然有点表格，因此CSS表格似乎提供了最可能的解决方案。

EG

＆＃13;

.parent {
  display: table;
  table-layout: fixed;
}
.row {
  display: table-row;
}
.child {
  border: 1px solid grey;
  display: table-cell;
  padding: 0 1em;
}

＆＃13;

<div class="parent">
  <div class="row">
    <div class="child">Short Text</div>
    <div class="child">Next Element</div>
  </div>
  <div class="row">
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae ab.</div>
    <div class="child">Next Element</div>
  </div>
</div>

＆＃13;

这是否适合您的具体情况，正如我所提到的，取决于实际的HTML，如有必要，可以进行调整。

jqmobile listview中元素之间的相等间距

1 个答案: