html - UL 列表内联，其中包含绝对位置元素

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

您应该使用内联 block 来容纳 block 元素。

实际上，不太确定是否需要该 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>