gpt4 book ai didi

html - css:翻译值不起作用

转载 作者:行者123 更新时间:2023-11-28 02:16:07 25 4
gpt4 key购买 nike

.arrow 中的翻译值在这里似乎没有任何作用。谁能解释一下为什么

<!doctype html>
<html>
<head>
<style>
.container{
height:500px;
width:600px;
}
.header{ height:40px; }
.step{width:194px;float:left; border:1px solid black; height:40px;}

.arrow{display:inline-block;width:25px; height:25px; border-left:1px solid
black; border-bottom: 1px solid black;-webkit-transform:translateY(20px);
transform:rotate(-135deg); }

</style>
</head>
<body>
<div class='container'>
<div class='header'>
<div class='step'> step 1 <div class='arrow'> </div></div>
<div class='step'> step 2 <div class='arrow'> </div></div>
<div class='step'> step 3 <div class='arrow'> </div></div>
<div class='body'> </div>
</div>

最佳答案

您应该将这两个添加到相同的transform属性,例如transform: translateY(20px) rotate(-135deg),否则只有最后一个将被考虑在内,因为 CSS 级联规则:

.container {
height: 500px;
width: 600px;
}

.header {
height: 40px;
}

.step {
width: 194px;
float: left;
border: 1px solid;
height: 40px;
}

.arrow {
display: inline-block;
width: 25px;
height: 25px;
border-left: 1px solid;
border-bottom: 1px solid;
transform: translateY(20px) rotate(-135deg);
}
<div class='container'>
<div class='header'>
<div class='step'> step 1 <div class='arrow'> </div></div>
<div class='step'> step 2 <div class='arrow'> </div></div>
<div class='step'> step 3 <div class='arrow'> </div></div>
<div class='body'></div>
</div>

关于html - css:翻译值不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48467871/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com