Question

我在JQuery mobile中创建了一个包含2个网格的列表视图。我需要将背景颜色设置为仅1格（块-a），但这样做，列表视图的填充显示为白色。我还需要为填充设置颜色。我需要前半部分有一种颜色，后半部分有不同的颜色。提前谢谢。

<div data-role="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-theme="none">
            <li data-role="list-didvider" >
               <a href="#">
                  <div class="ui-grid-a" data-theme="none">
                      <div class="ui-block-a">Distance</div>
                      <div class="ui-block-b">Places</div>   
                 </div>
               </a>
            </li>
      </ul>
  </div>
</div>

Answer 1

您需要在jQuery中自定义css。

例如

.ui-grid-a .ui-block-a { customization goes here }

.ui-grid-a .ui-block-b { customization goes here }

我已经设置了一个示例jsFiddle，它会让你开始。

http://jsfiddle.net/Akki619/z3BQ2/

小提琴可能无法提供您正在寻找的确切解决方案，但您可以随时播放以获得理想的效果。

在您的情况下：您需要根据需要自定义数据主题 a / c。

根据需要获得所需的结果可能会非常棘手。

Answer 2

到目前为止，您的填充已经着色，但边距不是。您需要删除边距并设置填充：

ul li {
    padding-left: 10px;
    margin-left: 0px;
}

然后，您的背景颜色将使用项目内容前的空格进行设置。

在listview中放两种颜色

2 个答案: