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...
欢迎选择我的课程,让我们一起见证您的进步~~
display:inline-block的元素之间会有一个字符的间隙,这个间隙导致了最后一个会掉下来。
解决方法:1、给父元素设置font-size:0px;2、取消掉换行符,如这样:<span>aaaa</span><span>aaaa</span><span>aaaa</span>连续。
或者 <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等方法。
可以看下类似于bootstrap这些框架的格栅系统。
给父元素设置font-size:0px;就很有效
display:inline-block的元素之间会有一个字符的间隙,这个间隙导致了最后一个会掉下来。
解决方法:
1、给父元素设置font-size:0px;
2、取消掉换行符,如这样:<span>aaaa</span><span>aaaa</span><span>aaaa</span>连续。
3、使用margin负值。
4、使用浮动。
5、另外还有使用letter-spacing、word-spacing等方法。
可以看下类似于bootstrap这些框架的格栅系统。
给父元素设置font-size:0px;就很有效