css - 多个span 元素怎么在容器大小差不多总会掉下来
天蓬老师
天蓬老师 2017-04-17 13:51:58
0
3
735

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)
左手右手慢动作

display:inline-block的元素之間會有一個字元的間隙,這個間隙導致了最後一個會掉下來。

解決方法:
1、為父元素設定font-size:0px;
2、取消掉換行符,如這樣:aaaaaaaa aaaa連續。

或者
<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;就很有效

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板