オーバーフロー：隠し要素の配置問題

Question

を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を大量に使用して、line-heightで問題が発生しました。私はliでvertical-align: top;を使用していた

Answer 1

、コードの下に確認してください。

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」を削除します。