Web Front-End-solutions to multi-column check box arrangement

It is complicated to create two columns for most check box groups or single-choice button groups. Tags can only be used for each element, but not for element groups. Ideally, we place the entire group in a fieldset and use legend as the label for this group. Unfortunately, this is currently not a feasible solution because the browser handles legend in Different positioning methods. Therefore, before the browser provides more consistent support, the best solution is to use the title element.

To create a column effect, you need to divide the check boxes into two groups, each of which is placed in a div. Then place the two DIV elements in a fieldset with descriptive IDS (you can also use annotations at this time, as shown in the following figure ).Code:

1 < Fieldset ID = "Favoritecolor" >
2 < H2 > Favorite color: </ H2 >
3 < Div >
4 < P > < Input Class = "Checkbox" ID = "Red" Name = "Red" Type = "Checkbox" Value = "Red"   />
5 < Label > Red </ Abel >
6 </ P >
7 < P > < Input Class = "Checkbox" ID = "Red" Name = "Red" Type = "Checkbox" Value = "Red"   />
8 < Label > Red </ Abel >
9 </ P >
10 ....
11 </ Div >
12 < Div >
13 < P > < Input Class = "Checkbox" ID = "Orange" Name = "Orange" Type = "Checkbox" Value = "Orange"   />
14 < Label > Orange </ Abel > </ P >
15 < P > < Input Class = "Checkbox" ID = "Orange" Name = "Orange" Type = "Checkbox" Value = "Orange"   />
16 < Label > Orange </ Abel > </ P >
17 ....
18 </ Div >
19 < BR Class = "Clear" >
20 </ Fieldset >

 

Because basic fieldset styles have been created, you must first overwrite these styles, set Fill and blank edges to 0, remove the border, and set the background to transparent, then, the label is moved to the left and the width is set to 10em. The title also needs to look like a label, so you need to set the font to normal and reduce the font size. Then set the width of the DIV and make it look like they are floating to the left to create the layout of the two columns. The Code has the truth:

1 Fieldset # favoritecolor {
2 Margin : 0 ;
3 Padding : 0 ;
4 Border : None ;
5 Background : Transparent ;
6 }
7 # Favoritecolor Div {
8 Width : 8em ;
9 Float : Left ;
10 }

Because these divs are floating, they no longer occupy any space, so they appear outside fieldset. (Sorry, the picture cannot be uploaded. This will allow many people to access the Internet in the whole building. Sorry, ).
In order to force fieldset to enclose these floating elements, an element for cleaning is inserted behind the second Div. In this example, a <br/> element is used, and the selector used is: clear:
. Clear {clear: Both;} (the same principle can also be used in Div .)
All the labels in this form are floating and the width is set to 10em. However, the label of the check box does not need to be floating, and the width should be much smaller. Therefore, you want to narrow these labels to prevent them from floating. Firefox seems to treat non-floating tags as block elements, which enables the check box to go to the next line. To avoid this problem, set the display attribute to inline. The Code is as follows:

1 # Favoritecolor label
2 {
3 Width : 3em ;
4 Float : None ;
5 Display : Inline ;
6 }

 

Labels and check boxes are now aligned. However, the default blank space of each section is that the vertical space is too large. What should we do? We can reduce the top and bottom spaces of a paragraph:

1 # Favoritecolor P {
2 Margin : 0.3em 0 ;
3 }

Now we have a complicated form layout. Basic form styles are responsible for general la S, and can then handle exceptions by overwriting these styles. Now, let's write it here. Thanks to the comments "think_fish" and "pulihe". I will pay attention to them and make improvements in the future!

 

(Like to learn and want to discuss with me a variety of Web Knowledge left your mailbox or contact information, or with me mail 747850255@qq.com reprint Please consciously attach reprinted address, from the blog Park "Opening Audi next year ")