溢出：隐藏 - 元素对齐问题

Question

当我将overflow:hidden添加到span时，它稍微向上移动。可能是什么原因？

跨度是动态的小提琴 - https://jsfiddle.net/afelixj/beqrzypy/1/

我试图用text-indent隐藏点，并将样式添加到span:before。

ul{
  margin: 0;
  padding: 0;
  width: 400px;
}
li{
  display: inline-block;
  list-style: none;
  border: 1px solid #ccc;
  margin: 0 4px 7px 0;
  padding: 5px;
}
span{
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.holder{
  position: relative;
}
.moreitems{
  display: none;
  position: absolute;
  top: 30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 200px;
}
.moreitems li{
  display: block;
}

<ul>
  <li>Lorem ipsum dolor</li>
  <li>sit amet, consectetur</li>
  <li>adipisicing elit</li>
  <li>Reiciendis</li>
  <li>ad minima om</li>
  <li>velit expedita</li>
  <li>impedit</li>
  <li class="holder"><span>...</span><ul class="moreitems" style="display: none;"><li class="">ad minima om</li><li class="">velit expedita</li><li class="">impedit</li><li class="">laborum earum</li></ul></li>
</ul>

如下图所示，点样图的最佳方法是什么？我在使用较少font-size的{​​{1}}时遇到问题。

Answer 1

我在vertical-align: top;中使用了li，请查看以下代码。

li{
  display: inline-block;
  list-style: none;
  border: 1px solid #ccc;
  margin: 0 4px 7px 0;
  padding: 5px;
  vertical-align: top;
}

Answer 2

从范围中删除“display：block”。