Question

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

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?

Answer 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:

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

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

OR

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

Demo: 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.