1

我目前正在尝试美化我的资源。为此，我想将按钮和单选按钮的宽度更改为 80%，并将对齐方式更改为居中。对于按钮，我进行了很好的 css 设置，但我无法将单选按钮组居中。

HTML：

<div data-role="page" id="testPage" data-theme="e">
    <fieldset data-role="controlgroup">
        <legend id="SettingsDifficulty"></legend>
        <input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" />
        <label for="radio-choice-1" id="label1" class="activeOnce">Radio 1</label>
        <input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" />
        <label for="radio-choice-2" id="label2" class="activeOnce">Radio 2</label>
        <input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" />
        <label for="radio-choice-3" id="label3" class="activeOnce">Radio 3</label>
    </fieldset>
    </br>
    <hr>
    </br>
<a href="#settings" data-role="button" id="buton" class="activeOnce">Button</a>

</div>

CSS：

.ui-btn.activeOnce
{
  width:80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

最后的单个按钮现在为 80% 宽度并且完美居中。单选按钮的宽度也为 80%，但仍左对齐。在网上我找到了一些水平单选按钮组的解决方案，但这个解决方案不适用于 data-type="vertical"。有没有办法把它集中起来？

非常感谢你帮助我:-)。

JSFIDDLE：http: //jsfiddle.net/7eKZb

4

3 回答 3

1

看到这个小提琴http://jsfiddle.net/bB2vM/

我将您的单选按钮组包装在一个 div 中，它可以正常工作，请参阅小提琴

<div data-role="page" id="testPage" data-theme="e">
<fieldset data-role="controlgroup">
    <legend id="SettingsDifficulty"></legend>
    <div id="centregroup">
    <input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" />
    <label for="radio-choice-1" id="label1" class="activeOnce">Radio 1</label>
    <input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" />
    <label for="radio-choice-2" id="label2" class="activeOnce">Radio 2</label>
    <input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" />
    <label for="radio-choice-3" id="label3" class="activeOnce">Radio 3</label>
    </div>
</fieldset>
</br>
<hr>
</br>

按钮

这是CSS

.ui-btn.activeOnce
{
  width:80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#centregroup
{
  text-align:center;    
}

见截图。

在火狐中

于 2013-08-30T08:26:23.870 回答
1

使用 jQuery Mobile 网格系统，ui-grid-b和 3 块ui-block-a，ui-block-b和ui-block-c.

演示

<div class="ui-grid-b">
  <div class="ui-block-left ui-block-a"><!-- Placeholder --></div>
    <div class="ui-block-center ui-block-b">
      <fieldset data-role="controlgroup">
        <!-- Buttons go here -->
      </fieldset>
    </div>
  <div class="ui-block-right ui-block-c"><!-- Placeholder --></div>
</div>

并覆盖块 a、b 和 c 的宽度。为了不覆盖其他块，我使用了额外的自定义类。

.ui-block-left, .ui-block-right {
  width: 10% !important;
}

.ui-block-center {
  width: 80% !important;
}
于 2013-08-30T09:32:03.260 回答
1

您可以将您的单选按钮分组到具有固定宽度和高度的 div 中：

<fieldset data-role="controlgroup" data-type="vertical" style="text-align: center">
  <div class="centerRadio">
   <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
   <label for="radio-choice-1">A</label>
   <input data-theme="e" type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
   <label for="radio-choice-2">B</label>
 </div>
</fieldset>

CSS：

.centerRadio
{
width: 80%; margin: 0 auto;
}

演示

于 2013-08-30T09:51:46.453 回答