Jquery Mobile 列表项对齐

Question

我正在使用 jquery mobile 设计一个 ListView ，如下所示

我正在尝试将标签和值分别对齐为 30% 和 70%。

ListView 代码如下

<ul data-role="listview">
  <li data-role="list-divider">Account Information</li>
  <li>
    <span class="field_label">Label:</span>
    <span class="field_value">value</span>
  </li>
  <li>
    <span class="field_label">Long Label:</span>
    <span class="field_value">value</span>
  </li>
</ul>

使用的 CSS 样式

.field_label{
  width:30%;
}
.field_value{
  width:70%;
}

标签和值仍然没有对齐。问题是什么？如何对齐？

Answer 1

是一个内联元素，除非您指定 display: inline-block，否则不会符合您提供的宽度