我正在制作一个带有 css 过渡的动画按钮，但遇到了问题。 按钮应该自行调整大小，以便整个文本在元素中始终可见。 问题是我的文本并不总是相同。我将宽度和填充设置为自动，但它不起作用，我不知道如何解决这个问题。 这是我的代码。任何人都可以帮助我吗？谢谢
.a-btn{
color: #ffffc2;
background-color: #ffffc2;
border: 1px solid #dfdfdf;
padding-left:20px;
padding-right:20px;
position:relative;
float:left;
overflow:hidden;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn-text{
display:block;
white-space:nowrap;
color:#446388;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.a-btn-slide-text{
position:absolute;
height:100%;
top:0px;
right:20px;
width:0px;
background:#ffffc2;
color:#ff0000;
white-space:nowrap;
text-align:left;
text-indent:10px;
overflow:hidden;
line-height:28px;
-webkit-transition:width 0.3s linear;
-moz-transition:width 0.3s linear;
-o-transition:width 0.3s linear;
transition:width 0.3s linear;
}
.a-btn:hover{
background-color: #fdfd85;
padding-right:130px;
}
.a-btn:hover .a-btn-slide-text{
background-color: #fdfd85;
width:auto;
}<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<a href="#" onclick="removeSelectedExercise();" class="btn a-btn btn-sm margin-right">
<span class="a-btn-text"><i class="fa fa-trash red"></i></span>
<span class="a-btn-slide-text">Retirer articles sélectionnés</span>
</a>
</body>
</html>
最佳答案
解决办法是将宽度改为max-width
.a-btn{
color: #ffffc2;
background-color: #ffffc2;
border: 1px solid #dfdfdf;
padding-left:15px;
padding-right:20px;
position:relative;
float:left;
overflow:hidden;
max-width: 30px;
-webkit-transition:max-width 0.3s ease-in-out;
-moz-transition:max-width 0.3s ease-in-out;
-o-transition:max-width 0.3s ease-in-out;
transition:max-width 0.3s linear;
}
.a-btn-text{
display:block;
white-space:nowrap;
color:#ff0000;
}
.a-btn:hover{
background-color: #fdfd85;
max-width: 300px;
}<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<a href="#" onclick="removeUnselectedExercise();" class="btn a-btn btn-sm ">
<span class="a-btn-text"><i class="fa fa-trash red " style="padding-right:20px;"></i> Remove Selected</span>
</a>
</body>
</html>关于html - 具有自动宽度的 css 动画按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30032234/