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

Question

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

这是我用来创建 ListView 的代码

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];
}
}​

这是输出电流的示例(我试图附上图片)...

文本下一个元素

长测试文本下一个元素

长测试文本下一个元素

长测试文本下一个元素

我希望所有“下一个元素”文本都排列在一列中。有没有办法做到这一点？谢谢你!

Answer 1

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

如

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

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

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