JQuery Mobile：我如何将UI元素与标记对齐？

随着JQueryMobile，我试图建立一个弹出窗口应该是这样的JQuery Mobile：我如何将UI元素与标记对齐？

enter image description here

，我已经尝试了所有可能的选项，但一直没能在这个UI到达。

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

我不明白，为什么旁边码输入选中图标没有对齐，或者为什么复选框和“不要再告诉我这个”文不对齐。

这里的任何想法都会有所帮助。

来源

2015-01-13 lonelymo

是否使用第三，你还没有表现出对grid_14，grid_4，grid_10等的CSS第三方网格系统还是你推出自己的？在jQM中，您可以使用内置的CSS：http://jsfiddle.net/ezanker/0956ner4/ – ezanker

你所拥有的东西，元素没有对齐的原因是因为display: block CSS属性设置为你弹出的所有元素，并导致他们采取了整个空间，因此块像一个段落p元件。

将其更改为inline-block并解决了该问题。

更多的信息在这里关于CSS 显示财产

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

演示。我删除了一些标记div，因为不需要。

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 
}

结果

enter image description here

来源

2015-01-15 01:54:49 Tasos

JQuery Mobile：我如何将UI元素与标记对齐？

回答

相关问题