html - 适合显示中的宽度 :inline

Question

我想做一个以响应为中心的框列表。
所以我用了 text-align:center , 但最后一行也居中: http://jsfiddle.net/NWmpL/1/

我试图使用紧密包围 <li> 的附加包装器,
但我知道“紧密围绕”内容的唯一方法是使用 display:inline
http://jsfiddle.net/NWmpL/2/但在这里text-align:left不工作
和width:200px应该是灵活的(因为在我的例子中它是浏览器宽度)

有没有其他方法可以“紧紧包围”内容？或者还有其他解决方案吗？

提前致谢。

更清楚:http://jsfiddle.net/NWmpL/6/

我想改变这个 对此

Answer 1

您应该使用 display:inline-block 进行布局，而不是 display:inline。

display:inline 仅适用于文本内容；如果元素中有任何 block 内容并且想要内联行为，则应始终使用 inline-block。

所以我去了你的 fiddle 并将 inline 更改为 inline-block。

猜猜是什么....解决了问题；它现在看起来像您想要的那样。

参见 http://jsfiddle.net/NWmpL/8/

您也可以考虑使用 float:left 来实现这种布局，但是由于我们已经通过 inline-block 获得了可行的答案，所以我将离开