为什么在Chrome上的第二列上没有显示项目符号

Question

我想知道为什么会发生这种情况，子弹在Safari和Firefox上正常显示，但第二列上的子弹不会出现在Chrome上。 ul.ul2col＆gt; 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上的表现

Google Chrome上的内容

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>