你不知道的css技巧----css实现元素横排显示的先后顺序(兼容主流浏览器)

本文介绍使用CSS的order属性和direction属性调整按钮内图标与文字的显示顺序,提供兼容IE11及以下版本的解决方案。通过inline-flex和inline-block布局,实现元素的灵活排序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一个很常见的需求,我们需要把两个横排显示的元素,动态设置他的先后顺序;如:button按钮中,icon图标与文字的循序问题。
在这里插入图片描述
常规的做法,我们一般是通过v-if进行设置,但是这样做会导致很多代码重复,不太友好,我们可以尝试这用css来处理。
html部分结构如下:

<button
    class="c-button"
    <c-icon class="icon" :name="icon"></c-icon>
    <span class="content">
      <slot></slot>
    </span>
  </button>

下面介绍第一种方式:order(不兼容IE11以下)
在这里插入图片描述
语法:order: number|initial|inherit;

样式编写:

.c-button{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  &.icon-left{
    >.icon{
      order:0;
    }
    >.content{
      odrder:1;
      margin-left:5px;
      margin-right:0px;
      display: block;
    }
  }
  &.icon-right{
    >.icon{
      order:1;
    }
    >.content{
      odrder:0;
      margin-left:0px;
      margin-right:5px;
      display: block;
    }
  }
}

上述写法不兼容IE11以下,在IE11以下的效果一直是居左的
在这里插入图片描述

下面介绍第二种方式,direction(兼容主流浏览器,包括IE11以下)
语法:direction: ltr|rtl;
样式编写:

.c-button{
  &.icon-left{
    direction: ltr;
    >.icon{
      display: inline-block;
      direction: rtl;
    }
    >.content{
      display: inline-block;
      direction: rtl;
      margin-left:5px;
      margin-right:0px;
    }
  }
  &.icon-right{
    direction: rtl; // 右向左
    >.icon{
      display: inline-block;
      direction: ltr;
    }
    >.content{
      display: inline-block;
      direction: ltr;
      margin-left:0px;
      margin-right:5px;
    }
  }
}

direction: ltr;表示从左向右排列
direction: lrtl;表示从右向左排列

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值