JQuery Mobile: Как выровнять элементы пользовательского интерфейса только с отметкой?

Question

С JQueryMobile, я пытаюсь создать всплывающее окно, которое должно выглядеть как этот

Я перепробовал все возможные варианты, но не смог прибыть в этом интерфейсе.

<div data-role="popup" id="referpage" data-overlay-theme="b" data-theme="b" data-dismissible="false"> 
     <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
     <div data-role="main" class="ui-content" data-theme="b"> 
      <h2 class="ui-title">Have a code?</h2> 
      <p>validate the code with us right here</p> 
      <div class="grid_14"> 
       <div class="grid_10"> 
        <input type="text" data-clear-btn="true" placeholder="6 char. code" name="referralCode" id="referralCode"> 
       </div> 
       <div class="grid_4"> 
        <a class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-check ui-btn-icon-notext">check</a> 
       </div> 
      </div> 

      <div class="grid_14"> 
       <div class="grid_4"> 
        <input type="checkbox" name="checkbox-enhanced" id="checkbox-enhanced" data-enhanced="true"> 
       </div> 
       <div class="grid_10"> 
        <p>do not show me this again</p> 
       </div> 
      </div> 

      <a href="#" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-arrow-r">Next</a> 
      <!-- <a id="btnReferralPageNext" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Next</a> --> 
     </div> 
    </div> 

Я не понимаю, почему Птичка рядом с ввода кода не выровнены или почему флажок и «не показывать это» текст не выровнены.

Любые мысли здесь помогут.

Answer 1

С чем у вас есть, причина, по которой элементы не выровнены потому, что свойство display: block CSS устанавливаются для всех элементов в всплывающем окне, и что заставляет их занимать все пространство, следовательно блока как пункт p элемент.

Измените его на inline-block, и это устраняет проблему.

Более подробная информация здесь относительно Css дисплея свойства

http://www.w3schools.com/cssref/pr_class_display.asp

Demo. Я удалил некоторые разметки divs, поскольку они не нужны.

http://jsfiddle.net/8x4vkv1b/

CSS

.grid_11, .grid_12, .grid_4, .grid_10 { 
    display: inline-block !important; 
} 
.grid_11 { 
    width:150px; 
} 
.next { 
    left:66%; 
    margin-bottom:-5px 
} 

Результат