html - 为什么要点不显示在 Chrome 的第二列

Question

我想知道为什么会这样，元素符号在 Safari 和 Firefox 上正确显示，但第二列中的元素符号没有出现在 Chrome 上。 ul.ul2col > li display: inline-block 是我发现的一个 hack，但它仍然不允许它在 Chrome 上正常工作。

<ul style="ul2col">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
<ul>

我的 CSS

.ul2col { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2}
ul.ul2col > li { display: inline-block }

它在 Safari 和 Firefox 上的表现如何

它在谷歌浏览器上的表现如何

Answer 1

将 list-style-position: inside; 赋给 .ul2col li 类。

.ul2col { 
  column-count: 2; 
  -webkit-column-count: 2; 
  -moz-column-count: 2;
}
.ul2col li{  
  list-style-position: inside;
}

<ul class="ul2col">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
<ul>