个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
这是我的代码片段:
.line::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.line:hover::before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.line {
position: relative;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0%);
} <body>
<div class="sponge">
<span class="line"> meow <br> </span>
<span class="line"> meow1 <br> </span>
<div class="line"> meow2 <br> </div>
<div class="line"> meow3 <br> </div>
</div>
</body>当类跨度时效果很好，文本带有下划线。当类为 div 时，文本不可见。
我认为并没有功能差异，所以显然我在某个地方出错了。有人可以纠正我并提高我的理解吗？
最佳答案
其他答案已经触及了问题的原因，但对于为什么......可能有点误导
首先，一个<span>是内联元素，而 <div>是 block 元素，这确实意味着它们在很多方面都不同，包括对 margin 等样式的不同 react 或 transform .
然而，转换不起作用的原因与元素的宽度无关，这是因为内联元素实际上根本不是可转换元素，如定义here :
A transformable element is an element in one of these categories:
an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
...
(请注意，“原子级内联元素”不是指标准内联元素，而是指带有 display 的元素，例如 inline-block )
另外，我想指出虽然 margin-top和 margin-bottom不要 - 正如另一个答案中指出的那样 - 适用于内联元素，margin-left和 margin-right做。
关于html - 当我将 <span> 更改为 <div> 时，文本消失了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45991570/
24
4
0
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界. 这篇CFSDN的博客文章详解dedecms后台编辑器将回车 改为 的方法由作者收集整理，如果你对
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 6 年前。 Improve th
不是将代码放在正文的头部或末尾(我把它放在正文的末尾)，如果我将代码放在 JS 文件中而不是在 html 中它自己的脚本标记，是否可以？ (我假设它像任何其他代码一样工作正常，但我问以防万一) 最佳答
我尝试执行从\e 命令编写的查询，但现在我无法执行任何查询，但可以在 PSQL 中执行命令。 现在我注意到这一点，我输入的命令现在在\e 中。 当我关闭\e(尝试运行它)时问题开始了。 最佳答案 ps
我有一个这样的字符串($ 字符总是被其他字符包围): a$b c$d e$f 我希望我的字符串方法在 $ 前面放置一个 \ 并删除换行符: a\$bc\$de\$f 我试过了，但它没有放入 \ 字符:
我需要使用 Java 构建一个 XML 文件。问题是我必须使用一些特殊字符，例如“ć”，然后在我的移动应用程序中读取它。 如果我手动更改 ć 就可以正常工作至 ć在我的 XML 文件中的记事
我有一个removeUser 页面，我在其中使用，然后使用submitForm() 函数进行错误处理。这段代码运行得非常好: export default function RemoveUserPag
我在数据库 “2048-05-21” 中有一个看起来像这样的日期 我只想得到年份，在这一年我只想得到两个后面的数字并将两个前面的数字更改为19 example: data : 2048-05-21 1
public class Venus1 { public static void main(String args[]) { int[]x={1,2,3};
我有以下 PHP 脚本，现在我需要在 JavaScript 中做同样的事情。 JavaScript 中是否有类似于 PHP 函数的函数，我已经搜索了好几天但找不到类似的东西？我想做的是计算某个单词在数
这个问题在这里已经有了答案: Is it bad practice to specify an array size using a variable instead of `#define` in
我陷入了一种情况，我必须通过“选中”工具栏中的复选框来“选中”列表中存在的所有复选框。 这是创建复选框列表的代码:- itemTpl: 'checked="checked" /> {groupName
我正在使用Python3。在分析一些网站时，我遇到了一些奇怪的字符并寻找解决方案。我找到了一个，但在找到解决方案之前，我尝试了一些方法，并且知道我无法重置它。当我使用 Jupyter 笔记本将列表 l
我在 http 下有 unity android app 和 site api 的工作基础设施。 最近换了服务器，申请了ssl证书。现在我的 api 在 https 下。 在 unity 应用程序中，
我在 http 下有 unity android app 和 site api 的工作基础设施。 最近换了服务器，申请了ssl证书。现在我的 api 在 https 下。 在 unity 应用程序中，
我在 Objective-C 中有一些代码。我想，我收到了 NSString 类型，但是当我尝试将它保存在核心数据中时，我得到了一个 user.clientID = clientID; 错误，例如:
在表中我有一个名为 CallTime 的字段 (Varchar)。 包括晚上8:00、晚上8:40、上午10:00等时间 我想将字段类型更改为“时间”并更新时间格式。该怎么做？ 谢谢 最佳答案 UPD
这个问题在这里已经有了答案: C# - for Loop Freezes at strange intervals (3 个答案) 关闭 6 年前。 我试图解决 problem #14 from P
我今天在 Pycharm 社区版 5.0.3 中收到了这个错误，想知道这是否只是我做错了/没有意识到，或者是 PyCharm lint 问题。重现错误的代码是 mylist = list() # fi
我的目标是将数据库中的随机文本显示到网页上。首先，我不知道为什么我的数据没有保存，为什么我得到的是[Entity of type sec.helloweb.HelloMessage with id:
我是一名优秀的程序员,十分优秀！