美文网首页
inline-block元素上浮解决方案

inline-block元素上浮解决方案

作者: 洛桃桃 | 来源:发表于2018-10-02 18:08 被阅读0次

    解决同行等高inline-block元素对不齐的问题。

    描述

    inline-block元素内加入长短不一的文本,部分元素出现了上浮现象。

    预期与实际

    关键

    行内元素和替换元素的基线位于文本框的底端,无文本的块状行内元素、图片和非替换元素的基线就是元素的最底端。
    当各元素之间的文本字体大小或者文本长度不一致时,基线的位置也会发生改变,页面会呈现更加的“混乱”状态,但实际上还是参照基线对齐的。

    行内元素与替换元素默认vertical-align: baseline;
    如图:

    baseline

    方法

    由于本例中的inline-block元素等高,因此设置vertical-align: top/middle/bottom;即可,其他情况按需选择。
    代码示例:

    <div class="wrap">
      <span></span>
      <span>Lorem</span>
      <span>Lorem ipsum dolor sit</span>
      <span></span>
    </div>
    
    span {
        display: inline-block;
        width: 100px;
        height: 50px;
        text-align: center;
        vertical-align: top;/*也可设置为bottom/middle*/
        color: #fff;
        background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
    }
    

    效果:


    效果

    参考

    相关文章

      网友评论

          本文标题:inline-block元素上浮解决方案

          本文链接:https://www.haomeiwen.com/subject/esdaoftx.html