How to solve non-uniformity between two objects side by side

For a check box on the front side, the text below is often seen, but there are always a lot of problems. How to make the two of them aligned side by side is sometimes a matter of several pixels, but different browsers are different, especially ie6.

Today, we suddenly found a solution to these problems.

The Code is as follows:

 

<Div> <span> <input type = "checkbox" id = "haveRead" name = "haveRead" style = "top: 2px; "/> <label onclick =" clickToCheck () "> I have read and agreed to <a href =" # "> qile User Registration Agreement </a> </label> </span> </div> <div> <span> <input type = "checkbox" id = "haveRead" name = "haveRead" style = "top: 2px; "/> <label onclick =" clickToCheck () "> I have read and agreed to <a href =" # "> qile User Registration Agreement </a> </label> </span> </div>

There is a div in the outermost part, but the two labels will be arranged according to their own default style, either the check box is several pixels higher than the text, or the text is higher than the check box.

In this case, the position: relative of the div with the outermost side; the position: relative of the check box inside, so that the style of the check box can be set through top and left, achieve the purpose of alignment.