css - 如何在视口(viewport)中将一组 JQuery Mobile 单选按钮居中？

Question

我正在 PhoneGap (Cordova) 上使用 JQuery Mobile 制作一个应用程序。我使用 Codiqa 为我的 UI 设计了一个线框。到目前为止看起来还不错，但是我要用来更改 View 的单选按钮组没有居中 - 在 WVGA800 大小的 webkit 浏览器上它向左偏移了大约 25 像素。当缩放到平板电脑形状时，该组离视口(viewport)中心越来越远。

这是我的元素的 jsFiddle 链接，问题未解决 - http://jsfiddle.net/jaspermogg/sahXy/1/

这是我修复的元素的 jsFiddle 链接 - http://jsfiddle.net/jaspermogg/NvMsK

我想出了一个使用 JQuery 的解决方案，但我没有经验，不知道该触发哪个事件。

当我在 Webkit 中加载 UI 时，它会呈现 UI 前脚本，然后在 <1 秒后刷新到后脚本状态。这看起来很蹩脚。我将脚本设置为在 $(window).load 上运行。

问题:

1. 我应该寻找什么事件，您能告诉我如何实现吗？

2. 我的脚本是否在正确的位置 - 它应该在页面内部，还是在页面外部？还是在 head 中？

3. 用 JQ 做这件事感觉真的很愚蠢 - 当然有办法用 CSS 做这个吗？

提前感谢您提供的任何帮助!干杯!

Answer 1

我想我在上面的评论中回答了我自己的问题，所以要通过接受我的回答来正式化它。

我最后做的是——

(1) 在CSS中将包含单选按钮的div设置为visibility: hidden。

(2)求出每个单选按钮的宽度，并将它们相加。

(3) 设置单选按钮所在div的宽度为总宽度。

(4) 将可见性属性的更改链接到 (3)。

CSS 必须这样设置 -

#viewselector{
    margin: 0 auto;
    text-align: center;
    visibility: hidden;
}

执行(1)到(4)的代码如下-

$(document).ready(function(){

    var idealwidth = 0

    $(".ui-radio").each(function(){
        idealwidth = idealwidth + $(this).width();
    });

    $("#viewselector").width(idealwidth).css('visibility','visible');

});

希望这对某人有帮助!