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

问题是在inline-block元素之间产生的空白区域 - 它们增加到20％并将最后一个（从5中）推到下一行。

如果消除标记中锚点之间的空格/换行符，它就可以工作：DEMO
要设置此项，您可以在此处查看一些技巧：的 How to remove the space between inline-block elements?

Answer 2

在div data-role="content"中换行链接，然后从弹出式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

使用内联块和百分比宽度的多行

2 个答案: