如果我从 .action-button
中删除 float:left
属性,转换动画将不起作用。你能解释一下这里发生了什么吗?
标记:
<a href="#" class="action-button animate green">Are</a>
样式:
.action-button
{
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.green
{
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.action-button:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
Codepen 第 17 行:http://codepen.io/koriolis/pen/euAEg
最佳答案
这是因为 a
元素是 inline
元素,因为它们对齐父元素并且不会清除任何一侧。
当您添加 float: left
时,它会将元素从 inline
更改为 block
但也会删除 clear: both
并允许元素彼此相邻对齐。
如果您不希望标签在页面上 float ,则可以使用 inline-block
实现与 float
相同的效果。
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
关于html - float left 如何影响 transform translate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31312447/