Question

我有一些代码可以做出整齐的切换开关。问题是我被要求自动调整大小，但我无法弄清楚如何不重写整个代码。我可以做一些简单的修复，它会全局改变它，让它自动调整大小＆gt;？

例如，如果我要将标签更改为“肯定”（开）或“否定”（关闭），则文本当前会延伸到范围的边界之外，但应该加宽。

这是主要的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;
}

CSS切换开关脚本 - 帮助将其更改为自动调整大小？

1 个答案: