如何在jQuery mobile中右对齐翻转开关 [英] How to right-align a flip toggle switch in jQuery mobile

问题描述

如何在jQuery移动列表视图中正确对齐翻转开关？

这是我的工作： http://jsfiddle.net/bthj/ry799/

开关可以看到有贴在左边的标签，但我想有它更好地利用在狭窄的移动屏幕上的空间。

设置float：

解决方案

p>这应该做的伎俩。在线示例： http://jsfiddle.net/tw16/ry799/1/

  .ui-li .ui-btn-inner a.ui-link-inherit，.ui-li-static.ui-li {
 display ：block; 
 padding：0.9em 75px 0.9em 15px; 
} 
 div.ui-slider-switch {
 position：absolute; 
 right：0; 
 width：44％; 
} 
  

How can a flip switch be right aligned within a jQuery mobile list view?

Here's what I'm working with: http://jsfiddle.net/bthj/ry799/

The switch can be seen there clinging to the label at left, but I would like to have it on the right to make better use of space on a narrow mobile screen.

Setting "float:right" on the div.ui-slider around the switch doesn't work, the switch then floats out of the list view.

解决方案

This should do the trick. Live example: http://jsfiddle.net/tw16/ry799/1/

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    display: block;
    padding: 0.9em 75px 0.9em 15px;
}
div.ui-slider-switch {
    position: absolute;
    right: 0;
    width: 44%;
}

这篇关于如何在jQuery mobile中右对齐翻转开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！