css具有自動寬度的動畫按鈕

我正在使用css轉換處理動畫按鈕，並且遇到問題。該按鈕應該調整自身的大小，以便整個文本始終在元素中可見。問題是我的文本並不總是相同的。我將寬度和填充設置爲自動但它不起作用，我不知道如何解決這個問題。這是我的代碼。任何人都可以幫助我。由於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"> 
 
\t \t \t \t \t \t <span class="a-btn-text"><i class="fa fa-trash red"></i></span> 
 
\t \t \t \t \t \t <span class="a-btn-slide-text">Retirer articles s&eacute;lectionn&eacute;s</span> 
 
\t \t \t \t \t </a> 
 

 
    </body> 
 
    </html>

來源

2015-05-04 Nadia

的問題我的文字寬度尚未定義。它可以改變，因爲我的後端使用gettext來翻譯。當我設置填充權 - 自動它不起作用 – Nadia

的解決辦法是改變寬度最大寬度

.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 "> 
 
\t \t \t \t \t \t <span class="a-btn-text"><i class="fa fa-trash red " style="padding-right:20px;"></i> Remove Selected</span> 
 
\t \t \t \t \t </a> 
 

 

 
    </body> 
 
    </html>

來源

2015-05-04 17:19:34 Nadia

還有你正在修復'width：300px;'這怎麼可能成爲一種解決方案而不是你所期望的？ – Raj

我推出了最大寬度，我的文字不會超過300px，但我們甚至可以將其定義爲100％ – Nadia

.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:160px; 
 
} 
 
.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"> 
 
\t \t \t \t \t \t <span class="a-btn-text"><i class="fa fa-trash red"></i></span> 
 
\t \t \t \t \t \t <span class="a-btn-slide-text">Retirer articles s&eacute;lectionn&eacute;s</span> 
 
\t \t \t \t \t </a> 
 

 
    </body> 
 
    </html>

來源

2015-05-04 14:26:23 Raj

謝謝但我的文本並不總是相同的，這是問題所在。 – Nadia

在你的CSS，在.A-BTN-幻燈片文本部分，改線

right: 20px

這屬性是放置t屏幕外的分機，我建議將其改爲類似

.a-btn-slide-text{ 
    position:absolute; 
    height:100%; 
    top:0px; 
    right:-2px;

http://jsfiddle.net/s3nz7q69/

來源

2015-05-04 14:28:31 PrestonM

css具有自動寬度的動畫按鈕

回答

相關問題