CSS切換開關腳本 - 幫助將其更改爲自動調整大小？

Question

我有一些使整潔的切換開關的代碼。問題是我被要求自動調整大小，但我不知道如何重寫整個代碼。是否有一些簡單的修復，我可以做到這一點，將改變它全球範圍內，讓它自動調整大小？例如，如果我要將標籤更改爲「肯定」（打開）或「否定」（關閉），則文本當前會延伸到範圍的邊界之外，但應該擴大範圍。

這是主要的CSS：

.toggle2 { min-width: 79px; height: 25px; display: inline-block; position: relative; cursor: pointer; vertical-align: middle; padding: 0; } 
.toggle2 i {display: block; position: absolute; top: 0; width: 100%; height: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font: 13px/24px Arial !important; text-transform: uppercase;} 
.toggle2 i:first-child {left: 0;background-color: #73B9FF;} 
.toggle2 i:last-child {right: 0;background-color: #73B9FF;} 
.toggle2.on i:first-child {-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset;} 
.toggle2.on i:last-child, 
.toggle2.off i:first-child {text-indent: -9999px; width: 24px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; z-index: 1; background-color: #fff;} 
.toggle2.off i:last-child {} 

這裏有一個的jsfiddle： http://jsfiddle.net/LU5kp/1/

任何幫助，不勝感激！ :)

Answer 1

這裏的一個解決方案： http://jsfiddle.net/slynagh/UmYkZ/

的CSS：

.toggle2 { 

width:auto; 
height: 24px; 
display: inline-block; 
position: relative; 
cursor: pointer; 
vertical-align: middle; 
padding: 0; 
} 
.toggle2 i { 
display: block; 
padding: 0 12px; 
width: 100%; 
height: 100%; 
-webkit-border-radius: 12px; 
-moz-border-radius: 12px; 
border-radius: 12px; 
text-align: center; 
font: 13px/24px Arial !important; 
text-transform: uppercase; 
} 
.toggle2 i:first-child { 
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; 
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; 
background-color: #73B9FF; 
} 
.toggle2 i:last-child { 
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; 
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; 
background-color: #cc0000; 
} 
.toggle2.on i:first-child { 

} 


.toggle2.on i:last-child, 
.toggle2.off i:first-child { 
display:none; 
text-indent: -9999px; 
} 
.toggle2.off i:last-child:before { 
content: " "; 
display:block; 
position:absolute; 
left:1px; 
top:1px; 
text-indent: -9999px; 
width: 22px; 
height: 22px; 
-webkit-border-radius: 11px; 
-moz-border-radius: 11px; 
border-radius: 11px; 
z-index: 1; 
background-color: #fff; 
} 
.toggle2.on i:first-child:after { 
content: " "; 
display:block; 
position:absolute; 
right:-23px; 
top:1px; 
text-indent: -9999px; 
width: 22px; 
height: 22px; 
-webkit-border-radius: 11px; 
-moz-border-radius: 11px; 
border-radius: 11px; 
z-index: 1; 
background-color: #fff; 
}