如何實(shí)現(xiàn)checkbox和radio對(duì)齊

這篇文章主要介紹如何實(shí)現(xiàn)checkbox和radio對(duì)齊，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

不僅不同瀏覽器不同，不同的字體,不同的文字大小也會(huì)表現(xiàn)不一樣。

重置 form checkbox & radio

因?yàn)椴煌瑸g覽器解析不一樣，有些是默認(rèn)margin，有些是默認(rèn)padding，還有ie6,7連margin和padding即使設(shè)置為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;/*與右側(cè)文字的間距*/
    padding: 0;
    width: 13px;
    height: 13px;
    /*ie7 ie6 根據(jù)不同的 font-size 設(shè)置不同的值*/
    *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、效果圖

以上是“如何實(shí)現(xiàn)checkbox和radio對(duì)齊”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！