使用行內塊和百分比寬度的多行

Question

在jquery移動彈出窗口中我想每行顯示五個鏈接。

HTML：

<div data-role="page" id="home"> 
    <a href="#popup1" id="btn1" data-role="button" data-rel="popup">button 1</a> 
    <a href="#popup2" id="btn2" data-role="button" data-rel="popup">button 2</a> 

    <div data-role="popup" id="popup1" class="ui-content"> 
     <a href="#">111</a> 
     <a href="#">222</a> 
     <a href="#">333</a> 
     <a href="#">444</a> 
     <a href="#">555</a> 
     <a href="#">666</a> 
     <a href="#">777</a> 
     <a href="#">888</a> 
     <a href="#">999</a> 
    </div> 
    <div data-role="popup" id="popup2" class="ui-content"> 
     <a href="#">111</a> 
     <a href="#">222</a> 
     <a href="#">333</a> 
    </div> 
</div> 

CSS：

a { 
    display: inline-block; 
    width: 20% 
} 

當我點擊按鈕彈出1正確顯示分裂成兩排9個鏈接; 單擊第二個按鈕，而是顯示所有連接的三個鏈接。爲什麼？

所有可以http://jsfiddle.net/5EwTb/3/

感謝觀看。

Answer 1

將鏈接包裝在div data-role="content"中，並從popup div中刪除.ui-content。那麼你需要設置一個width到內容div。

<div data-role="popup" id="popup2"> 
    <div data-role="content"> 
    <a href="#">111</a> 
    <a href="#">222</a> 
    <a href="#">333</a> 
    </div> 
</div> 

.ui-popup .ui-content { 
    min-width: 150px; 
} 

Demo

Answer 2

問題是在inline-block元素之間產生的空白 - 它們增加到20％，並將最後一個（從5中）推到下一行。

• 所以它的工作原理，如果你消除了錨之間的空格/換行符在你的標記：DEMO

• 要設置這條直線，你可以看到一些技巧在這裏： How to remove the space between inline-block elements?