<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      復選框與單選框與文字水平垂直居中對齊的處理方法
                
                  發表時間：2024-05-07             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]checkbox和radio兩個標簽都是我們經常會用到的，有時候項目中出現了一個checkbox與同一行的文字不能對齊的問題，檢查后發現個問題，checkbox和radio兩個標簽的默認高寬都是13px，而項目中使用的字體大小卻是12px，如果將字體調整為14px就不存在這個問題了，于是作者根據網...
      checkbox和radio兩個標簽都是我們經常會用到的，有時候項目中出現了一個checkbox與同一行的文字不能對齊的問題，檢查后發現個問題，checkbox和radio兩個標簽的默認高寬都是13px，而項目中使用的字體大小卻是12px，如果將字體調整為14px就不存在這個問題了，于是作者根據網上查到的資料整理了幾種解決辦法。
      先發一下具體的問題情況以及解決后的效果：
      11.jpg
      <html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{font-size:12px;}
div{float:left;width:110px;}
input{margin:0;padding:0;}
.input1{vertical-align:text-bottom;margin-bottom:-1px;*margin-bottom:-4px;}
.input2{height:13px;vertical-align:text-top;margin-top:0;}
.input3{height:15px;vertical-align:bottom;margin-bottom:-1px;margin-bottom:-2px\9;*margin-bottom:0px;}
.input4{height:14px;vertical-align:top;margin-top:1px;margin-top:0\9;}
.input5{vertical-align:middle;margin-top:-2px;}
.input6{vertical-align:-3px;}
</style>
</head>
<body>
<h2>一般的情況</h2>
<p><input type="checkbox" />復選框&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" />單選框</p>
<div>
<h2>單選框</h2>
<p><input type="radio" class="input1"/>解決方法一</p>
<p><input type="radio" class="input2"/>解決方法二</p>
<p><input type="radio" class="input3"/>解決方法三</p>
<p><input type="radio" class="input4"/>解決方法四phpernote.com</p>
<p><input type="radio" class="input5"/>解決方法五</p>
<p><input type="radio" class="input6"/>解決方法六</p>
</div>
<div>
<h2>復選框</h2>
<p><input type="checkbox" class="input1"/>解決方法一</p>
<p><input type="checkbox" class="input2"/>解決方法二</p>
<p><input type="checkbox" class="input3"/>解決方法三</p>
<p><input type="checkbox" class="input4"/>解決方法四</p>
<p><input type="checkbox" class="input5"/>解決方法五</p>
<p><input type="checkbox" class="input6"/>解決方法六</p>
</div>
</body>
</html>
      兼容瀏覽器：chrome，firefox，ie8，ie7，ie6，safari
      備注：個人推薦第 2 種，第 5 種和第 6 種方法。因為這 3 種方法都沒有用到 css hack。
      以上內容就是復選框和單選框與文字水平垂直居中對齊的解決方法，希望能幫助到大家。
      相關推薦：
      推薦11款jQuery開發的復選框和單選框美化插件_jquery
      HTML復選框和單選框 checkbox和radio事件介紹_基礎知識
      自學篇之js 提取復選框和單選框的值 和純css的3D按鈕
      以上就是復選框和單選框與文字水平垂直居中對齊的解決方法的詳細內容，更多請關注php中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清