UL Список inline с элементом абсолютного положения внутри него

Question

Любые идеи, как я могу получить этот встроенный?

HTML/CSS

<style> 
    .socialCount li { 
     display: inline; 
    } 
    .socialCount li div.social { 
     position: relative; 
    } 
     .socialCount li span.socialtip { 
       position: absolute; 
       line-height: 6px; 
       padding: 7px; 
       font-size: 10px; 
       text-align: center; 
       color: rgb(255, 255, 255); 
       background: rgb(142, 142, 142); 
       border-radius: 5px; 
       margin-left: 10px; 
     } 

     .socialCount li span.socialtip:after { 
       content: ""; 
       position: absolute; 
       width: 0; 
       height: 0; 
       border-width: 5px; 
       border-style: solid; 
       border-color: transparent #8e8e8e transparent transparent; 
       top: 5px; 
       left: -9px; 
     } 
</style> 
<ul class="socialCount"> 
    <li><div class="social">Facebook <span class="socialtip facebook">10,000</span></div></li> 
    <li><div class="social">Twitter <span class="socialtip twitter">10,000</span></div></li> 
    <li><div class="social">Instagram <span class="socialtip instagram">10,000</span></div></li> 
</ul> 

Я предпочел бы не использовать абсолютное положение или что-нибудь, но думаю, что нужно для всплывающей подсказки.

Answer 1

Вы должны использовать встроенный блок, чтобы иметь возможность удерживать элементы блока.

На самом деле, не слишком уверен, что div необходим.

будет ли это тем, что вы ищете?

.socialCount li { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
    
 
li span.socialtip { 
 
    position: relative; 
 
    line-height: 6px; 
 
    padding: 7px; 
 
    font-size: 10px; 
 
    text-align: center; 
 
    color: rgb(255, 255, 255); 
 
    background: rgb(142, 142, 142); 
 
    border-radius: 5px; 
 
    left: 0; 
 
    top: 100%; 
 
} 
 
    
 
span.socialtip:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: transparent #8e8e8e transparent transparent; 
 
    top: 5px; 
 
    left: -9px; 
 
    margin-left: -0px; 
 
}

<ul class="socialCount"> 
 
    <li><div class="social">Facebook <span class="socialtip facebook">10,000</span></div></li> 
 
    <li><div class="social">Twitter <span class="socialtip twitter">10,000</span></div></li> 
 
    <li><div class="social">Instagram <span class="socialtip instagram">10,000</span></div></li> 
 
</ul>