我正在嘗試在代碼中加入一個切換開關,但是當我這樣做時,它無法保持其樣式(即形狀)。切換開關在HTML中丟失樣式頁面
這裏是下面的HTML代碼:
<ul id="switch">
<li class="on" id="ON"><a href="#">ON</a></li>
<li class="off" id="OFF"><a href="#">OFF</a></li>
</ul>
這裏是CSS:
#switch{
list-style:none;
width:85px;
height:26px;
position:absolute;
top:50%;
left:90%;
margin:-13px 0 0 -42px;
}
#switch.li{
float:left;
line-height:23px;
font-size:11px;
padding:2px 10px 0;
background: #E5E5E5;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F3F3), to(#E5E5E5));
text-shadow:0 1px 0 #FFF;
border-left:1px solid #D5D5D5;
border-top:1px solid #D5D5D5;
border-bottom:1px solid #D5D5D5;
-webkit-box-shadow:0 1px 0 #FFF inset, 0 0 5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .3);
}
#switch.li:first-child{
-webkit-border-radius:5px 0 0 5px;
}
#switch.li:last-child{
-webkit-border-radius:0 5px 5px 0;
}
#switch.li a{
text-decoration: none;
font-family:Helvetica, Arial;
text-transform:uppercase;
color:#a1a1a1;
}
.on{
background: #505050;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#777), to(#505050));
text-shadow:0 -1px 0 #444, 0 0 7px #9AE658;
border-right:1px solid #444;
border-top:1px solid #444;
border-bottom:1px solid #444;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .7) inset, 0 1px 0 #FFF;
}
#switch.li:not(.on):active{
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#f1f1f1));
}
#switch.li.on a{
color:#7BBA47;
cursor: default;
}
因此而不是並排的開啓和關閉的一面,開標籤之上關閉標籤。請幫助
剛剛嘗試過,它仍然失真。 – dominicbure
@dominicbure:我剛剛在我的文章中添加了一個工作示例。你的問題的一部分應該是在你原來的CSS中,你有'#switch.li'(「帶有id開關和class li的元素」),而你希望'#switch li'(「li元素是元素的子元素與id開關「) – TheThirdMan
感謝您的幫助,發生的是這是一個已經運作的開關,但一旦我將它添加到我的代碼,然後失去它的格式。我不知道它是否受到資源(例如bootstrap cdn)的影響,但我嘗試過使用不同的資源,並且仍然存在相同的問題。 – dominicbure