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

How to enable the root account in Ubuntu 20.04

After Ubuntu 20.04 is installed, there is no root...

Do you know how many connections a Linux server can handle?

Preface First, let's see how to identify a TC...

Docker container deployment attempt - multi-container communication (node+mongoDB+nginx)

The reason is this I wanted to deploy a mocker pl...

Detailed explanation of the process of configuring multiple SVN repositories on Linux servers

1. Create a repository in the specified directory...

Uninstalling MySQL database under Linux

How to uninstall MySQL database under Linux? The ...

Detailed explanation of permission management commands in Linux (chmod/chown/chgrp/unmask)

Table of contents chmod Example Special attention...

Implementation of Nginx configuration Https security authentication

1. The difference between Http and Https HTTP: It...

How to update the view synchronously after data changes in Vue

Preface Not long ago, I saw an interesting proble...

Solution to Element-ui upload file upload restriction

question Adding the type of uploaded file in acce...

Implementation of CSS3 button border animation

First look at the effect: html <a href="#...

JavaScript data flattening detailed explanation

Table of contents What is Flattening recursion to...

Tomcat's method of setting ports through placeholders (i.e. parameter specification method)

For work needs, I found a lot of information on t...

Vue3 Vue CLI multi-environment configuration

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

SQL merge operation of query results of tables with different columns

To query two different tables, you need to merge ...

MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)

1. Time difference functions (TIMESTAMPDIFF, DATE...