CSS 浮動清理,不使用 clear:both標簽
494
2024-04-05
<button value="submit" class="submitBtn"><span>Submit</span></button>
button {
border:0;
cursor:pointer;
font-weight:bold;
padding:0 20px 0 0;
text-align:center;
}
button span {
position:relative;
display:block;
white-space:nowrap;
padding:0 0 0 20px;
}
/*blue buttons*/
button.submitBtn {
background:url(images/btn_blue_right.gif) right no-repeat;
font-size:1.3em;
}
button.submitBtn span {
height:50px;
line-height:50px;
background:url(images/btn_blue_left.gif) left no-repeat;
color:#fff;
}
button.submitBtn:hover {
background:url(images/btn_blue_right_hover.gif) right no-repeat;
}
button.submitBtn:hover span {
background:url(images/btn_blue_left_hover.gif) left no-repeat;
}
就像你能看到的那樣,每個狀態使用了2個圖片(總共4個圖片)。進一步簡化,可以將這些狀態轉化為兩個。但這種想法的最初測試出現了不一致的結果。
button {
width:auto;
overflow:visible;
}
button span {
margin-top:1px;
}
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!