2013-12-08 2 views
2

Я пытаюсь настроить страницу с помощью JQuery Mobile, где у меня есть сетка с тремя столбцами, с меткой, текстовым вводом и набором горизонтально выровненных радиокнопками. По какой-то причине Grid-элемент c устанавливает, что он больше, чем другие 2, и я не могу заставить первые 2 ячейки выровняться с ним.Вертикальное выравнивание на мобильной сетке JQuery

Пример кода по адресу: http://jsfiddle.net/5WSj4/1/

Вот код в вопросе

<div data-role="page" id="page_fullDialog"> 
    <div id="dialog_main" data-role="content"> 
     <fieldset class="ui-grid-b"> 
      <div class="ui-block-a" style="width:30%"> 
       <label style="vertical-align:top" data-mini="true" for="leagueNameInput">League Name:</label> 
      </div> 
      <div class="ui-block-b" style="width:10%"> 
       <input type="text" style="vertical-align:top" data-mini="true" name="leagueNameInput" id="leagueNameInput" maxlength="4" value="" data-mini="true" /> 
      </div> 
      <div class="ui-block-c" style="width:60%; text-align: right;"> 
       <div data-role="fieldcontain" data-mini="true"> 
        <fieldset data-role="controlgroup" data-mini="true" data-type="horizontal"> 
         <!-- <legend>Difficulty:</legend> --> 
         <input type="radio" name="difficulty" id="difficultyEasy" value="choice-1" /> 
         <label for="difficultyEasy">Easy</label> 
         <input type="radio" name="difficulty" id="difficultyMedium" value="choice-2" checked="checked" /> 
         <label for="difficultyMedium">Medium</label> 
         <input type="radio" name="difficulty" id="difficultyHard" value="choice-2" /> 
         <label for="difficultyHard">Hard</label> 
        </fieldset> 
       </div> 
      </div> 
     </fieldset> 
    </div> 
</div> 

Любая помощь с этим было бы весьма признателен.

ответ

1

По какой-то странной причине ui-controlgroup имеет верхний край 0,5em. Переопределение его в элементе fieldset решает проблему, то есть

style="margin-top: 0px;" 
Смежные вопросы