Question

我有一组内嵌的单选按钮。我已经用这行代码将它们转换为jQuery UI按钮：

$("input:radio").button();

现在，他们看起来都很好，但他们仍然在左边对齐。我无法解决这个问题。我甚至尝试使用<center>，以及介于两者之间的所有内容，但它没有按照我想要的方式居中。

这是HTML：

<div style="display: <?php echo $visible; ?>;">
        <form action="php/ratingsPost.php" method="POST" id="ratingsPost">
                      <input type="radio" class="radio" name="rate" value="1" id="1" onChange="javascript:$('#ratingsPost').submit()"/>
                      <label for="1">1</label>
                      <input type="radio" class="radio" name="rate" value="2" id="2" onChange="javascript:$('#ratingsPost').submit()"/>
                      <label for="2">2</label>
                      <input type="radio" class="radio" name="rate" value="3" id="3" onChange="javascript:$('#ratingsPost').submit()"/>
                      <label for="3">3</label>
                      <input type="radio" class="radio" name="rate" value="4" id="4" onChange="javascript:$('#ratingsPost').submit()"/>
                      <label for="4">4</label>
                      <input type="radio" class="radio" name="rate" value="5" id="5" onChange="javascript:$('#ratingsPost').submit()"/>
                      <label for="5">5</label>
        </form>
        </div>

任何帮助？

Answer 1

根据documentation（最后一个标签），您可以为JQueryUI组件指定不同的主题。

整个单选按钮应该类似于：

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

您需要的是使用个人CSS样式表覆盖您自己设计的类。例如：

.ui-button .ui-button-text{
    // personal style
}

无论如何，使用JSBin或JSFiddle作为JohnP所说的一些代码可以很好地了解您的问题。快乐的编码！

无法居中jQuery UI风格的单选按钮

1 个答案: