1

我目前有一个像这样的有序列表，其中数字和项目居中并左对齐：

在此处输入图像描述

我使用这个 css 实现了这一点：

ol
{
padding-left:1em;
padding-right:1em;
display: inline-block;
text-align: left;

word-break: break-word !important;
/*white-space: nowrap*/

}

我看到的问题是它奇怪地包装了文本 - 如果它们比其他列表项长一定数量，它将包装列表项（创建一个新行）。这会创建上图（或文本格式）中的内容：

1.睡袋2.帐篷 3. 食物 4.
炉子5.夹克 6. 杀虫剂




请注意 Bags 是如何在新行上的，但这不是 div 结束的地方。我尝试使用white-space: nowrap，但显然它会按照它所说的那样做，然后长文本会继续超出而div不会中断。

此外，它可能只是某种浏览器故障，因为有时当我回击并且页面被缓存时，它会正确加载，并且在 safari 而不是 chrome 中，它似乎在没有white-space: nowrap.

任何帮助/想法表示赞赏，或者如果它只是一些奇怪的无法修复的东西，我很抱歉

4

2 回答 2

1

你可以试试下面的代码：

工作演示

div{text-align:center;}
ol
  {
   padding-left:1em;
   padding-right:1em;
   display: inline-block;
   text-align: left;
   word-break: break-word !important;
   /*white-space: nowrap*/

  }
于 2016-06-06T06:28:57.567 回答
0

给列表一个（更大的）宽度：

ol {
  width: 200px;
  ... rest of CSS
}

至于调试，我经常添加一个border: 1px solid red;，这样你就可以看到元素延伸了多远。如果你将它添加到ol你会看到它的宽度会导致换行。所以让它更大应该可以解决问题。

于 2016-06-06T06:27:14.930 回答