taşma: gizli - öğe hizalama sorunu

Question

overflow:hidden'u span'a eklediğimde, hafifçe yukarı gider. Sebebi ne olabilir?

yayılma keman dinamik - ı text-indent ile noktalar gizlemek ve span:before stil eklemek için çalışıyordu https://jsfiddle.net/afelixj/beqrzypy/1/

.

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>

aşağıda tasarımda olduğu gibi noktalar stil için en iyi yolu nedir ? Daha büyük line-height ile büyük font-size kullanmayla ilgili sorun yaşıyorum.

Answer 1

ben li içinde vertical-align: top; kullanmış, kod aşağıda kontrol ediniz.

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

Answer 2

Açıklıktan "display: block" öğesini kaldırın.