How to implement checkbox & radio alignment

How to implement checkbox & radio alignment

Not only do different browsers behave differently, but different fonts and text sizes will also behave differently.

Reset form checkbox & radio

Because different browsers have different parsing, some have default margins, some have default padding, and even if IE6 and 7 have margins and padding set to 0, the space they occupy is still relatively large, so it is still necessary to reset them, which can solve a lot of unnecessary troubles.

Here is the solution for 14px Arial font:

1. CSS code

 .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;/*Spacing between the text on the right*/
    padding: 0;
    width: 13px;
    height: 13px;
    /*ie7 ie6 sets different values ​​according to different font-size*/
    *vertical-align: 1px;
}

2. HTML code

 <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. Rendering

The above is the full content of this article. I hope that the content of this article can bring some help to your study or work. At the same time, I also hope that you can support 123WORDPRESS.COM!

<<:  JavaScript Interview: How to implement array flattening method

>>:  CSS3 achieves cool sliced ​​image carousel effect

Recommend

MySQL 8.0.24 installation and configuration method graphic tutorial

This article shares the installation tutorial of ...

3 ways to correctly modify the maximum number of connections in MySQL

We all know that after the MySQL database is inst...

MySQL uses custom functions to recursively query parent ID or child ID

background: In MySQL, if there is a limited level...

Common usage of regular expressions in Mysql

Common usage of Regexp in Mysql Fuzzy matching, c...

HTML table tag tutorial (23): row border color attribute BORDERCOLORDARK

In rows, dark border colors can be defined indivi...

How to install MySQL 5.7.17 and set the encoding to utf8 in Windows

download MySQL official download, select Windows ...

How to build a complete samba server in Linux (centos version)

Preface smb is the name of a protocol that can be...

js implements shopping cart addition and subtraction and price calculation

This article example shares the specific code of ...

50 Beautiful FLASH Website Design Examples

Flash enabled designers and developers to deliver...

Vue3 Vue CLI multi-environment configuration

Table of contents 1. Introduction 2. Switching 1....

Several solutions for forgetting the MySQL password

Solution 1 Completely uninstall and delete all da...

Implementing access control and connection restriction based on Nginx

Preface Nginx 's built-in module supports lim...