图例标签包含在JQuery mobile中左对齐的文本？

Question

有人知道为什么<legend> 标签不在 JQuery mobile 中居中吗？例如我尝试了以下代码。

<fieldset data-role="controlgroup" data-type="horizontal" data-theme="a">
                <legend>I would this site.<legend>
                <input type="radio" name="radio-choice-2-6" id="radio-choice-1-6" value="choice-1-6" />
                <label for="radio-choice-1-6">1</label>

                <input type="radio" name="radio-choice-2-6" id="radio-choice-2-6" value="choice-2-6" />
                <label for="radio-choice-2-6">2</label>

                <input type="radio" name="radio-choice-2-6" id="radio-choice-3-6" value="choice-3-6"  />
                <label for="radio-choice-3-6">3</label>

                <input type="radio" name="radio-choice-2-6" id="radio-choice-4-6" value="choice-4-6"  />
                <label for="radio-choice-4-6">4</label>

                <input type="radio" name="radio-choice-2-6" id="radio-choice-5-6" value="choice-5-6"  />
                <label for="radio-choice-5-6">5</label>
            </fieldset>

当我在移动设备和模拟器上检查时，<legend> 标记保持文本左对齐，即使我为 <legend> 标记应用了样式 text-align: center。但是，如果我输入更长的文本，那么它可以正常工作。例如：

<fieldset data-role="controlgroup" data-type="horizontal" data-theme="a">
                <legend><p>If given the choice, I would rather spend time with my family than with friends or working.</p><legend>
                <input type="radio" name="radio-choice-2-8" id="radio-choice-1-8" value="choice-1-8" />
                <label for="radio-choice-1-8">1</label>

                <input type="radio" name="radio-choice-2-8" id="radio-choice-2-8" value="choice-2-8" />
                <label for="radio-choice-2-8">2</label>

                <input type="radio" name="radio-choice-2-8" id="radio-choice-3-8" value="choice-3-8"  />
                <label for="radio-choice-3-8">3</label>

                <input type="radio" name="radio-choice-2-8" id="radio-choice-4-8" value="choice-4-8"  />
                <label for="radio-choice-4-8">4</label>

                <input type="radio" name="radio-choice-2-8" id="radio-choice-5-8" value="choice-5-8"  />
                <label for="radio-choice-5-8">5</label>
            </fieldset>

有人可以大声回答吗？

Answer 1

这是因为在 jQuery Mobile 重新设置页面样式后，您的第一个示例中的图例不再存在。

而不是像这样的图例标签：

<legend>I would this site.</legend>

新结构如下所示：

<div class="ui-controlgroup-label" role="heading">I would this site.</div>

或者，如果你想要一个完整的外观，你的新 HTML（在 jQM 重新样式之后）看起来像这样：

<fieldset id="custom-fieldset" data-theme="a" data-type="horizontal" data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
    <div class="ui-controlgroup-label" role="heading">I would this site.</div>
    <div class="ui-controlgroup-controls">
        <div class="ui-radio"><input type="radio" value="choice-1-6" id="radio-choice-1-6" name="radio-choice-2-6"><label for="radio-choice-1-6" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-radio-off ui-corner-left ui-btn-up-c"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">1</span></span></label></div>
        <div class="ui-radio"><input type="radio" value="choice-2-6" id="radio-choice-2-6" name="radio-choice-2-6"><label for="radio-choice-2-6" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-radio-off ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">2</span></span></label></div>
        <div class="ui-radio"><input type="radio" value="choice-3-6" id="radio-choice-3-6" name="radio-choice-2-6"><label for="radio-choice-3-6" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c ui-radio-off"><span class="ui-btn-inner"><span class="ui-btn-text">3</span></span></label></div>
        <div class="ui-radio"><input type="radio" value="choice-4-6" id="radio-choice-4-6" name="radio-choice-2-6"><label for="radio-choice-4-6" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c ui-radio-off"><span class="ui-btn-inner"><span class="ui-btn-text">4</span></span></label></div>
        <div class="ui-radio"><input type="radio" value="choice-5-6" id="radio-choice-5-6" name="radio-choice-2-6"><label for="radio-choice-5-6" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c ui-radio-off ui-corner-right ui-controlgroup-last"><span class="ui-btn-inner ui-corner-right ui-controlgroup-last"><span class="ui-btn-text">5</span></span></label></div>
    </div>
</fieldset>

现在你可以使用额外的 css 来改变它，比如这个例子：http://jsfiddle.net/Gajotres/YBSDb/

#custom-fieldset .ui-controlgroup-label {
    text-align: center;
}

Answer 2

使用标签似乎适用于 JQM1.4.3：

<legend>
    <div style="text-align : center;">I would this site.</div>
</legend>