Question

我的jQuery移动应用程序中有一个列表视图。我需要将缩略图放在右侧我在我的css文件中使用了以下代码，但它不适用于jQuery mobile 1.4.0？在jQuery mobile 1.4.0中不推荐使用.ui-li-thumb类吗？我怎样才能做到这一点？请帮帮我..

<ul data-role="listview"  data-inset="true"  data-filter="true" data-filter-   placeholder="Search  " 
data-split-icon="delete"  style="margin-top: 40px;"  > 

 <li class="RTLList" > <img src="img/thumb" /> element </li>
</ul>

的CSS

  .RTLList .ui-li .ui-btn-text .ui-link-inherit .ui-li-thumb  {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    right: 0;
    margin-right: 0 !important;

}

我也试过了，但它对我没有用!!

.ui-listview .ui-li-has-thumb .ui-li-thumb {
    right: 0;
    margin-right: 0 !important;
    text-align:right;
   float:right;
   }

Answer 1

这是 DEMO

.ui-listview>.ui-li-static.ui-li-has-thumb {
    padding-left: 1em;
    padding-right: 6.25em;
}
.ui-listview .ui-li-has-thumb>img:first-child {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
}
.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon){
    border-top-left-radius: 0;
}
.ui-listview>li.ui-last-child img:first-child:not(.ui-li-icon){
    border-bottom-left-radius: 0;
}

CSS将LI填充放在右边而不是左边，然后将缩略图绝对放在右边。

如何在jQuery mobile 1.4.0中将列表视图缩略图放在右边？

1 个答案: