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
Are the value ranges of int(3) and int(10) the same in mysql
Table of contents Question: answer: Reality: Know...
Linux disk sequential writing and random writing methods
1. Introduction ● Random writing will cause the h...
js to achieve the effect of dragging the slider
This article shares the specific code of how to d...
JS calculates the probability of winning based on the prize weight
Table of contents 1. Example scenario 1.1. Set th...
JavaScript data visualization: ECharts map making
Table of contents Overview Precautions 1. Usage 2...
Simple implementation method of Linux process monitoring and automatic restart
Purpose: Under Linux, the server program may be d...
A QQ chat room based on vue.js
Table of contents Introduction The following is a...
Method of Vue component document generation tool library
Table of contents Parsing .vue files Extract docu...
In-depth understanding of the use of r2dbc in MySQL
Introduction MySQL should be a very common databa...
How to configure the Runner container in Docker
1. Create a runner container mk@mk-pc:~/Desktop$ ...
Sample code for displaying reminder dots in the upper left or upper right corner using CSS3
Effect picture (if you want a triangle, please cl...
CSS3 realizes draggable Rubik's Cube 3D effect
Mainly used knowledge points: •css3 3d transforma...
MySQL paging query method for millions of data volumes and its optimization suggestions
Database SQL optimization is a common problem. Wh...
css3 animation ball rolling js control animation pause
CSS3 can create animations, which can replace man...
MySQL date and time addition and subtraction sample code
Table of contents 1.MySQL adds or subtracts a tim...