Original address: Http://www.tuicool.com/articles/vYJfIf
Today in the project encountered radio and text alignment problems (ie is not obvious, Firefox and Google more obvious), in this record.
1. The browser default text size is 14px , so when the text font is 14PX, the radio and CheckBox align well with the text as follows:
<!DOCTYPE html><Html><Head><Metacharset="UTF-8" ><Title>insert Title here</Title></Head><Body> <InputType="Radio"Value="1" > 1 <InputType="Radio"Value="2" > 2 <InputType="Radio"Value="3" > 3 <InputType="Radio"Value="4" > 4 <InputType="Radio"Value="5" > 5 <input type= "Radio" value= "6" > >5 <br/> <input type= "Radio" value= "1" > Student <input type= " Radio "value=" 2 "> Teacher </< Span class= "title" >body></HTML>
The output results are as follows:
2. Change font size , alignment problems
<!DOCTYPE html><Html><Head><Metacharset="UTF-8" ><Title>insert Title here</Title><Style>Body{ Font-size: 12px;}</Style></Head><Body> <InputType="Radio"Value="1" > 1 <InputType="Radio"Value="2" > 2 <InputType="Radio"Value="3" > 3 <InputType="Radio"Value="4" > 4 <InputType="Radio"Value="5" > 5 <input type= "Radio" value = "6" > >5 < br/> < Input type= "Radio" value= "1" > Student < Input type= "Radio" value= "2" > Teacher </body> </HTML>
The output results are as follows:
If the font changes to 10px or a smaller alignment problem is more severe (of course, the font is larger than 14px, there will be similar problems) as follows when the font is 10px
3. Workaround
<!DOCTYPE html><Html><Head><Metacharset="UTF-8" ><Title>insert Title here</Title><Style>Body{font-size:12px;}. inputstyle { vertical-align:text-bottom; margin-bottom:2px; *margin-bottom: -2px;//Compatible IE6,IE7} </Style></Head><Body> <InputType="Radio"Value="1"class="Inputstyle" > 1 <InputType="Radio"Value="2"class="Inputstyle" > 2 <InputType="Radio"Value="3"class="Inputstyle" > 3 <InputType="Radio"Value="4"class="Inputstyle" > 4 <InputType="Radio"Value="5"class="Inputstyle" > 5 <InputType="Radio"Value="6"class="Inputstyle" > >5 <Br/> <br/> <input type="Radio" value="1" class="Inputstyle > Students <input type="Radio" value= "2" class="Inputstyle" > Teacher </body></html>
The effect is as follows:
4. Other methods
1) When the text size 12px or so, single (complex) box set height:13px; Vertical-align:text-top; margin-top:0; the effect is as follows:
Radio Boxcheck box
2) When the text size 12px or so, single (complex) box set height:15px; Vertical-align:bottom; margin-bottom:3px; margin-top:-1px; the effect is as follows:
Radio Boxcheck box
3) When the text size 12px or so, single (complex) box set height:14px; Vertical-align:top; the performance after the style, the effect is as follows:
Radio Boxcheck box
4) When the text size 12px or so, single (complex) box set Vertical-align:middle; margin-top:-2px; margin-bottom:1px; the effect is as follows:
Radio Boxcheck box
Radio and checkboxes and text alignment issues
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
