CSS表和列表样式位置错误？解决方法？

Question

我有一个包含display: table;和list-style-position: inside;的无序列表。问题出在谷歌浏览器上，列表项不占用全宽，而是换行到下一行。

http://jsfiddle.net/ntbq5/

有趣的是，这并不总是发生，所以如果你没有看到我在说什么，请点击“运行”按钮 - 这就是我所看到的：

如果我刷新小提琴，不知何故它再次显得正常...... http://i40.tinypic.com/30hr4gl.gif。 Firefox和IE看起来也很正常。但在一个真实的网站上，令人耳目一新并没有改变任何东西。解决方案是什么？

编辑：我的不好，我忘了说我需要将我的桌子放在中心所以我不能使用100％宽度http://jsfiddle.net/ntbq5/10/还能做些什么？

Answer 1

使用White-space:nowrap;来解决此问题。

<强> WORKING DEMO

代码更改：

ul {
    display: table;
    list-style-position: inside;
    white-space:nowrap;
}

希望这有帮助。

Answer 2

也许只需为li元素定义宽度：

li {
    width: 150px;
}

这里是我添加了这个小提琴的屏幕：

http://jsfiddle.net/ntbq5/embedded/result/

Answer 3

您可以将宽度100％添加到<ul>元素。

CSS：

ul {
   display: table;
   width: 100%;
   list-style-position: inside;
}

Answer 4

您正在显示ul作为表格，并且应该定义表格的宽度以便精细查看。所以你需要设置ul的宽度。所以使用这个：

ul {
    display: table;
    list-style-position: inside;
    width: 100%;
}

正如您所提到的，您的ul标签在评论中有自动边距，您可以将text-align指定给中心

demo