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...

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(3)

ringa_lee2017-04-17 13:53:58 3楼

display：inline-block的元素之间会有一个字符的间隙，这个间隙导致了最后一个会掉下来。

解决方法：
1、给父元素设置font-size：0px；
2、取消掉换行符，如这样：aaaaaaaaaaaa连续。

或者
<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、使用margin负值。
4、使用浮动。
5、另外还有使用letter-spacing、word-spacing等方法。