使用内联块和百分比宽度的多行
使用内联块和百分比宽度的多行
提问于 2013-11-26 22:44:51
在jquery移动弹出窗口中，我想显示每行5个链接。
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/中查看
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-11-26 23:07:14
将链接包装在div data-role="content"中，并从弹出的div中删除.ui-content。然后，需要将width设置为content。
<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;
}演示
Stack Overflow用户
发布于 2013-11-26 23:06:48
问题是在inline-block元素之间生成的空格--它们添加到20%，并将最后一个(从5)推到下一行。
- 因此，如果您消除了标记中锚点之间的空格/换行，它就能工作：演示。
- 为了纠正这一点，您可以在这里看到一些技巧：如何删除内联块元素之间的空间？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20229588
复制相关文章
相似问题
腾讯云开发者
