inline的盒子设置transform不生效
目录
- 如何遇到的问题
- 原因
- 为什么会这样
- 怎么解决
如何遇到的问题
最近在开发过程中,因为需要对一个icon进行旋转,而icon本身,是设置span的伪类来进行的,结果我发现无论怎么设置transform都无法使其生效。
span::before {font-family: element-icons !important;content: "\e6c9";transform: rotate(180deg);}
原因
经过我的测试和网上找到的原因,它们相互印证这样一个结论:inline的盒子设置transform不生效。
为什么会这样
inline元素被视为一行中的文本片段,其大小由内容决定,并且不允许通过transform属性来改变其尺寸、位置或旋转。transform属性通常用于块级元素或行内块级元素,因为这些元素有明确定义的宽度和高度,可以进行变换操作。
怎么解决
要解决这个问题,可以将元素的display属性更改为inline-block或block。这样做后,transform属性就会生效。
span::before {font-family: element-icons !important;content: "\e6c9";transform: rotate(180deg);display: inline-block;}
如果你仍然希望元素保持display: inline,但仍然需要应用变换效果,可以考虑将元素包裹在一个块级元素中,然后在该块级元素上应用transform属性。
<div class="outer-wrapper"><span class="inline-box"></span>
</div>
.outer-wrapper {transform: rotate(180deg);}.inline-box::before {font-family: element-icons !important;content: "\e6c9";}
相关文章:
inline的盒子设置transform不生效
目录 如何遇到的问题原因为什么会这样怎么解决 如何遇到的问题 最近在开发过程中,因为需要对一个icon进行旋转,而icon本身,是设置span的伪类来进行的,结果我发现无论怎么设置transform都无法使其生效。 span::before {font-famil…...
自然语言处理学习笔记(四)————词典分词
目录 1.中文分词 2.词典分词 (1)词的定义 (2)词典性质——齐夫定律 (3)词典 (4)加载词典 (5)hanlp词典路径 1.中文分词 中文分词:指的是将一…...
jsoncpp库和nlohmann-json库实现JSON与字符串类型转换
在ROS中,可以使用jsoncpp库来实现JSON与字符串类型之间的转换。jsoncpp是ROS自带的一个JSON库,它提供了一些函数来解析和生成JSON数据。 下面是一个使用jsoncpp库实现JSON与字符串类型转换的示例代码: #include <ros/ros.h> #include…...
20230803 函数传参引用
定义多输出变量的函数时,通过直接传参数内存地址在函数内部直接修改外部变量的值。需要定义函数时 在输入参数前加 引用符号 & 。 C 值传递、指针传递、引用传递详解...
IDEA SpringBoot项目引入外部jar并打包
1、首先,我们再pom.xml中导入依赖包时,打包可以正常进行。 但如果我们引入了第三方的外部jar包(这里需要先把jar包添加到该项目依赖库中,这里不做演示),如图 2、导致打包时报错,程序包不存在或…...
ModaHub魔搭社区——阿里云通义千问宣布开源!70亿参数模型上线魔搭社区,免费可商用
通义千问开源!8月3日,AI模型社区魔搭ModaHub上架两款开源模型Qwen-7B和Qwen-7B-Chat,阿里云确认其为通义千问70亿参数通用模型和对话模型,两款模型均开源、免费、可商用。在多个权威测评中,通义千问7B模型取得了远超国内外同等尺寸模型的效果,成为当下业界最强的中英文7B…...
Jenkins 自动化部署实例讲解,另附安装教程!
【2023】Jenkins入门与安装_jenkins最新版本_丶重明的博客-CSDN博客 也可以结合这个互补看 前言 你平常在做自己的项目时,是否有过部署项目太麻烦的想法?如果你是单体项目,可能没什么感触,但如果你是微服务项目,相…...
arcgis字段计算器
1、两字段叠加。要求待叠加的字段类型为文本或字符串类型。如下: 2、字符串部分提取。...
数据结构: 线性表(无哨兵位单链表实现)
文章目录 1. 线性表的链式表示: 链表1.1 顺序表的优缺点1.2 链表的概念1.3 链表的优缺点1.4 链表的结构 2. 单链表的定义2.1 单链表的结构体2.2 接口函数 3. 接口函数的实现3.1 动态申请一个结点 (BuySListNode)3.2 单链表打印 (SListPrint)3.3 单链表尾插 (SListPushBack)3.4 …...
Exploring the Underlying Architecture of CSS3
引言 在现代的网页设计中,CSS(层叠样式表)起着至关重要的作用。CSS3作为最新的CSS标准,引入了许多令人兴奋的功能和特性。但是,要真正理解CSS3的底层架构实现原理,对于前端开发者来说,是非常重…...
方差分析||判断数据是否符合正态分布
方差分析练习题 练习学习笔记: (1) 标准差和标准偏差、均方差是一个东西。标准误差和标准误是一个东西。这两个东西有区别。 (2)单因素方差分析(MATLAB求解) (3)使用an…...
java linq多字段排序时间比较
public static void main(String[] args) {//100万条数据List<CrmInvestSaleUserCount> waitAssignUserList new ArrayList<>();for (int i 0; i < 1000000; i) {waitAssignUserList.add(new CrmInvestSaleUserCount().setSales_username("test" i…...
【c++】rand()随机函数的应用(二)——舒尔特方格数字的生成
目录 一、舒尔特方格简介 二、如何生成舒尔特方格 (一)线性同余法 1、利用线性同余法生成随机数序列的规律 (1) 当a和c选取合适的数时,可以生成周期为m的随机数序列 (2) 种子seed取值也是有周期的 2、利用线性同余法生成5阶舒尔特方格…...
“深入剖析JVM内部机制:探索Java虚拟机的运行原理“
标题:深入剖析JVM内部机制:探索Java虚拟机的运行原理 摘要:本文将深入探讨Java虚拟机(JVM)的内部机制,包括类加载、内存管理、垃圾回收、即时编译等关键概念和原理,帮助开发者更好地理解JVM的运…...
pandas 新增数据列的几种方式
准备数据 将下面的数据存到csv中 ymd,bWendu,yWendu,tianqi,fengxiang,fengli,aqi,aqiInfo,aqiLevel 2018-01-01,3℃,-6℃,晴~多云,东北风,1-2级,59,良,2 2018-01-02,2℃,-5℃,阴~多云,东北风,1-2级,49,优,1 2018-01-03,2℃,-5℃,多云,北风,1-2级,28,优,1 2018-01-04,0℃,-8℃…...
linux_驱动_iic总线获取si7006温湿度
应用层si7006.c #include<stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <stdlib.h> #include <string.h> #include <sys/ioctl.h> #include <arpa/inet.h>…...
虚拟机网络图标不见了
有3台虚拟机之前正常运行的,有一天打开虚拟机发现2台虚拟机的网络连接图标不见了,也ping不通另外两台。 解决:在终端执行以下命令,即可ping通 [roothadoop103 ~]# sudo nmcli network off [roothadoop103 ~]# sudo nmcli network…...
CTF:信息泄露.(CTFHub靶场环境)
CTF:信息泄露.(CTFHub靶场环境) “ 信息泄露 ” 是指网站无意间向用户泄露敏感信息,泄露了有关于其他用户的数据,例如:另一个用户名的财务信息,敏感的商业 或 商业数据 ,还有一些有…...
Redis学习总结
Redis学习总结 文章目录 Redis学习总结Radis基本介绍docker的安装基本数据结构通用命令字符型key的层次结构Hash类型Listset sortedset集合redis的java客户端jedis的使用jedis连接池的配置 SpringDataRedis自定义redistemplate的序列化与反序列化方式stringtemplate的使用 redi…...
云原生全栈体系(二)
Kubernetes实战入门 第一章 Kubernetes基础概念 一、是什么 我们急需一个大规模容器编排系统kubernetes具有以下特性: 服务发现和负载均衡 Kubernetes 可以使用 DNS 名称或自己的 IP 地址公开容器,如果进入容器的流量很大,Kubernetes 可以负…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
Python学习(8) ----- Python的类与对象
Python 中的类(Class)与对象(Object)是面向对象编程(OOP)的核心。我们可以通过“类是模板,对象是实例”来理解它们的关系。 🧱 一句话理解: 类就像“图纸”,对…...
UE5 音效系统
一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类,将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix,将上述三个类翻入其中,通过它管理每个音乐…...
高保真组件库:开关
一:制作关状态 拖入一个矩形作为关闭的底色:44 x 22,填充灰色CCCCCC,圆角23,边框宽度0,文本为”关“,右对齐,边距2,2,6,2,文本颜色白色FFFFFF。 拖拽一个椭圆,尺寸18 x 18,边框为0。3. 全选转为动态面板状态1命名为”关“。 二:制作开状态 复制关状态并命名为”开…...
IP选择注意事项
IP选择注意事项 MTP、FTP、EFUSE、EMEMORY选择时,需要考虑以下参数,然后确定后选择IP。 容量工作电压范围温度范围擦除、烧写速度/耗时读取所有bit的时间待机功耗擦写、烧写功耗面积所需要的mask layer...
Q1起重机指挥理论备考要点分析
Q1起重机指挥理论备考要点分析 一、考试重点内容概述 Q1起重机指挥理论考试主要包含三大核心模块:安全技术知识(占40%)、指挥信号规范(占30%)和法规标准(占30%)。考试采用百分制,8…...
组合模式:构建树形结构的艺术
引言:处理复杂对象结构的挑战 在软件开发中,我们常遇到需要处理部分-整体层次结构的场景: 文件系统中的文件与文件夹GUI中的容器与组件组织结构中的部门与员工菜单系统中的子菜单与菜单项组合模式正是为解决这类问题而生的设计模式。它允许我们将对象组合成树形结构来表示&…...
React与原生事件:核心差异与性能对比解析
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storms…...
