圖例標籤包含文字左對齊的JQuery移動？

有沒有人知道爲什麼<legend>標籤沒有集中在JQuery手機中？例如，我嘗試了下面的代碼。圖例標籤包含文字左對齊的JQuery移動？

<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>標籤保持文本，即使我將樣式text-align: center爲<legend>標籤左對齊。但是，如果我把一個更長的文本，那麼它的工作正常。例如：

<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>

請問有任何問題，請大聲回答？

來源

2013-04-26 FR STAR

有你試圖使''legend'顯示：block'明確，而且它的不浮動？ 'fieldset'標記同樣適用 – 2013-04-26 11:48:50

這是因爲在您的第一個示例中，在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; 
}

來源

2013-04-26 11:51:06 Gajotres

請參閱以下內容查看單行文本和雙行文本的''標記的不同行爲。 http://www.apartmentslanka.com/ztest_calender/test_radio.html – 2013-04-26 12:27:50

關於我的初步評論道歉實際上我現在已經刪除了這個。我的意思是'.survey_form fieldset .ui-controlgroup-label {text-align：center; }' – 2013-04-26 12:40:13

Sry我不明白你想說什麼？ – Gajotres 2013-04-26 12:47:34

要使用標籤，似乎爲JQM1.4.3工作：

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

來源

2014-09-15 04:08:06 xiaoboalex

圖例標籤包含文字左對齊的JQuery移動？

回答

相關問題