網頁設計實現核取方塊(checkbox)和單選框(radio)對齊的方法

佚名發表於2019-01-14

不僅不同瀏覽器不同,不同的字型,不同的文字大小也會表現不一樣。

重置 form checkbox & radio

因為不同瀏覽器解析不一樣,有些是預設margin,有些是預設padding,還有ie6,7連margin和padding即使設定為0後,所佔的空間還是比較大,所以還是有必須重置下,這樣就能解決很多不必要的麻煩。

以下是 14px Arial 字型的解決方案:

1、css程式碼

.form { font: 14px/18px Arial, Helvetica, sans-serif; }
.form input, .form label { vertical-align: middle; }
.form label { margin-right: 6px; }
.form_checkbox, .form_radio {margin: 0 3px 0 0;/*與右側文字的間距*/padding: 0; width: 13px;  height: 13px; /*ie7 ie6 根據不同的 font-size 設定不同的值*/ *vertical-align: 1px;}

2、html程式碼

<form name="form1" method="post" action="" class="form">
    <p> 
        <input type="checkbox" name="checkbox4" id="checkbox4" class="form_checkbox">
        <label for="checkbox4">checkbox4</label>
        <input type="checkbox" name="checkbox5" id="checkbox5" class="form_checkbox"> 
        <label for="checkbox5">checkbox5</label>
        <input type="checkbox" name="checkbox6" id="checkbox6" class="form_checkbox">
        <label for="checkbox6">checkbox6</label>
    </p> 
    <p>
        <input type="radio" name="radio" id="radio4" value="radio4" class="form_radio">
        <label for="radio4">radio4</label>
        <input type="radio" name="radio" id="radio5" value="radio5" class="form_radio">
        <label for="radio5">radio5</label> 
        <input type="radio" name="radio" id="radio6" value="radio6" class="form_radio">
        <label for="radio6">radio6</label> 
    </p>
</form>

3、效果圖

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助!

相關文章