css - 多个span 元素怎么在容器大小差不多总会掉下来

Question

topp{

    
            position: absolute;
            background-color: white ;
            height:64px;
            top:0;    
            left:50%;            
            width:501px;                
            margin-left: -250px;             

            }            
            #topp span{
                display:inline-block;                
                width:100px;                
                font-size:24px;
                height:32px;                    
            }
            希望每行显示5个，却四个就掉下了了width设为550倒是可以，却又空出50px...
            

Answer 1

display: There will be a character gap between the inline-block elements, and this gap causes the last one to fall down.

Solution:
1. Set font-size for the parent element: 0px;
2. Cancel the line break, like this: <span>aaaa</span><span>aaaa</ span><span>aaaa</span>continuous.

或者
<p class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</p>

<p class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</p>

3. Use negative margin values.
4. Use float.
5. There are also methods such as letter-spacing and word-spacing.

Answer 2

You can take a look at the grid system of frameworks similar to bootstrap.

Answer 3

Set font-size: 0px to the parent element; it is very effective