我需要一个自定义宽度和放大器的jQuery Mobile flipswitch高度。我设法通过将flipswitch包装在div中并应用以下CSS来改变它的大小:
#flipswitchWrapper .ui-flipswitch {
position:absolute;
width:400px;
height:100px;
}
#flipswitchWrapper .ui-flipswitch-active {
padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
width:98px;
height:98px;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
}
但是文字定位不正确。在这里查看jsfiddle:
https://jsfiddle.net/dinkoivanov/8czs4qzn/
我想我可能没做正确的事。你能否告诉jQuery Mobile是否可以这样做?
答案 0 :(得分:2)
如here所示,您可能需要在CSS中引入
因为自定义标签的长度与长度不同 标准标签
您可以通过更正CSS
中的缩进来定位文本#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
width:98px;
height:98px;
text-indent: -20em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
text-indent: -18em;
}
更新:https://jsfiddle.net/8czs4qzn/1/
将文本放在中间(见下面的评论):
#flipswitchWrapper .ui-flipswitch {
position:absolute;
width:400px;
height:100px;
line-height: 100px;
}
#flipswitchWrapper .ui-flipswitch-active {
padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on, #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
width:98px;
height:98px;
text-indent: -20em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
text-indent: -18em;
line-height: inherit;
}
#flipswitchWrapper .ui-flipswitch-off {
line-height: inherit;
}