Jquery Mobile List项目对齐方式

Question

我正在使用jquery mobile设计列表视图，如下所示

我试图将标签和价值分别调整为30％和70％。

列出视图编码如下

<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

，否则将不符合您提供的宽度

Answer 2

您可以使用任一解决方案实现此目的：

1. 使用jQuery Mobile Grids并修改ui-block-a和ui-block-b宽度，然后!important强制覆盖。

   <li class="ui-grid-a">
     <span class="ui-block-a">Label:</span>
     <span class="ui-block-b">Value</span>
   </li>
   

   CSS

   li > .ui-block-a {
     width: 15% !important;
   }
   li > .ui-block-b {
     width: 80% !important;
   }
   

     

   <强> Demo

2. 循环浏览标签并检查最宽的标签，然后根据最宽的标签修改所有标签的宽度。

   var width = 0;
   var length = $(".field_label").length - 1;
   var labels = $(".field_label");
   var count = 0;
   $.each(labels, function () {
       var init_width = parseInt($(this).outerWidth());
       if (init_width > width) {
           width = init_width;
       }
       if (count >= length) {
           $(".field_label").each(function () {
               $(this).width(width + "px");
           });
       }
       count++
   });
   

   CSS

   .field_label {
     display: inline-block;
   }
   

     

   <强> Demo