jQuery Mobile li元素右侧的图像

By default, if you put an image in an li element in jquery Mobile, the image is aligned to the left. I want it to be aligned to the right, like this

默认情况下，如果将图像放在jquery Mobile中的li元素中，则图像将对齐到左侧。我想让它与右边对齐，就像这样

Here is some text  | Image

The class ui-li-thumb aligns the image to the left. I can't override this class with one of my own. Any suggestions?

类ui-li-thumb将图像对齐到左侧。我不能用我自己的一个覆盖这个类。有什么建议么？

2 个解决方案

#1

In CSS you can either specify a selector that is more specific than the jQuery Mobile selectors or you can use !important to force your CSS rule(s) to be used:

在CSS中，您可以指定比jQuery Mobile选择器更具体的选择器，也可以使用！important来强制使用CSS规则：

.ui-page .ui-content .ui-listview .ui-li-thumb {
    left  : auto;
    right : 1px;
}

Demo: http://jsfiddle.net/BHBJ8/1/

演示：http：//jsfiddle.net/BHBJ8/1/

要么

.ui-li-thumb {
    left  : auto !important;
    right : 1px;
}

Demo: http://jsfiddle.net/BHBJ8/

演示：http：//jsfiddle.net/BHBJ8/

Notice that since the .ui-li-thumb class absolutely positions the element anchored by the left side, we can set left to auto and give the element a right property to align it to the right side of it's offset parent.

请注意，由于.ui-li-thumb类绝对定位左侧锚定的元素，我们可以将left设置为auto并为元素赋予一个right属性，以将其对齐到它的偏移父级的右侧。

#2

 <fieldset class="ui-grid-a">
    <div align="left" class="ui-block-a">
        <h5>18-inch,Split 5-spoke Bright Aluminium-alloy Wheels</h5>
        <img src="images/182x116-13TDI_GSSpecs035.jpg">
    </div>
    <div align="left" class="ui-block-b">
        <h5 >* A distinguished and elegant set of 18-inch,split5-spoke</h5>
    </div>
</fieldset>

This is how the webpage looks

这就是网页的外观

18-inch,split 5-spoke Bright Aluminium Alloy Wheels

18英寸，分体式5辐明亮铝合金轮毂

Img | Text

Img |文本

#1