css - 使用内联 block 和百分比宽度的多行

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