overflow:hidden - 元素对齐问题

Question

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

跨度动态在fiddle - 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 和小 line-height 时遇到问题。

Answer 1

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

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"。

overflow:hidden - 元素对齐问题

overflow:hidden - element alignment issue

css

overflow