Question

这是我的代码：

＆＃13;

.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%);
    }

＆＃13;

    <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>

＆＃13;

当类是跨越时它运行良好，文本加下划线。当这些类是div时，文本不可见。

我认为并且没有功能差异，所以很明显我在某个地方出了问题。有人可以纠正我并提高我的理解吗？

Answer 1

您已将margin-right: -50%;和transform: translate(-50%, 0);规则应用于.line类。这些规则对span等内联元素没有影响，但会在div等块元素中将文本移出屏幕右侧。

Answer 2

由于<div>正在推动transform: translate(-50%, 0%);，您的一半div已离开您的观点literally -50% left away from your view。

默认情况下，

<div>'s or block elements的宽度为100％，请考虑根据需要更新其宽度或将其设为display: inline-block;。

<span>是一个文本容器，可根据文本内容自动调整其大小，最适合文本使用。

希望有所帮助

Answer 3

其他答案已经触及问题的原因，但可能有点误导为什么......

首先，<span>是一个内联元素，而<div>是一个块元素，这意味着它们在很多方面都有所不同，包括对{{1}等样式的反应不同}或margin。

然而，转换不起作用的原因与元素的宽度无关，这是由于内联元素实际上根本不是可转换元素，如定义here：

可转换元素是以下类别之一的元素：

一个元素，其布局由CSS框模型控制   块级或原子内联级元素，或其显示   property计算到table-row，table-row-group，table-header-group，   table-footer-group，table-cell或table-caption [CSS21]

...

（注意＆＃34;原子内联级元素＆＃34;不引用标准内联元素，而是引用transform的元素，如display）

此外，我还要注意，虽然inline-block和margin-top没有 - 正如另一个答案所指出 - 适用于内联元素，margin-bottom和{{1做。

当我将<span>更改为<div>时，文字会消失

3 个答案: