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

Question

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

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

在此处输入图像描述

如果我刷新小提琴，它会以某种方式再次出现正常... http://i40.tinypic.com/30hr4gl.gif。Firefox 和 IE 看起来也很正常。但是在一个真实的网站上，刷新对我来说并没有任何改变。解决方案是什么？

编辑：我的错，我忘了说我也需要将我的桌子居中，所以我不能使用 100% 宽度http://jsfiddle.net/ntbq5/10/还有什么可以做的？

score 2 · Accepted Answer

用来White-space:nowrap;克服这个问题。

代码更改：

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

希望这可以帮助。

score 1 · Accepted Answer

也许只是为 li 元素定义一个宽度：

li {
    width: 150px;
}

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

score 1 · Accepted Answer

您可以为<ul>元素添加 100% 的宽度。

CSS：

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

score 1 · Accepted Answer

您正在将表格显示ul为表格，并且表格的宽度应定义为美观。所以你需要为那个ul设置宽度。所以使用这个：

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

正如您提到的，您的 ul 标签在评论中有自动边距，您可以将 text-align 分配给 center

4 回答 4