We help IT Professionals succeed at work.

Inline spacing of checkboxes inputs using CSS.

jwright9
jwright9 asked
on
Medium Priority
1,719 Views
Last Modified: 2011-10-19
Given the html/css fragment below, is there anyway to add space between the input checkboxes without using &nbsp&nbsp&nbsp&nbsp?

.instructiontext2 {
        PADDING-RIGHT: 15%; PADDING-LEFT: 10%; FLOAT: left; PADDING-BOTTOM: 5px; WIDTH: 100%; PADDING-TOP: 5px
}
span.spacer
{
 white-space: pre;
}
#sidebar
 {
width: 15%;
background-color: #f0f0f0;
}
SPAN.crumbbar-cb
{
text-align: right;
FONT-SIZE: 85%;
vertical-align: 35%;
}

<DIV class="instructiontext2 centered" tabIndex=0>
<H1 class=headingtext style="float: right;" tabIndex=0><A name=content>Access Beneficiary Data</A> </H1>
</DIV>

<br/>
<br/>
<br/>
<br/>
<br/>

<DIV style="background-color: #EEEEEE; MARGIN-LEFT: 10%; MARGIN-RIGHT: 15%; PADDING-RIGHT: 5px; PADDING-LEFT: 5%; PADDING-BOTTOM: 2px; PADDING-TOP: 5px;">

       
        <IMG src="images/BlueCircle.gif"></IMG>
                <SPAN style="FONT-SIZE: 115%; FONT-WEIGHT: bold; vertical-align: 25%;">
                        Access
                </SPAN>
                &nbsp&nbsp&nbsp&nbsp
                <SPAN class="crumbbar-cb">
                        <INPUT type=checkbox name="cb1" value="Human Resources">Human Resources</INPUT>
                </SPAN>
                &nbsp&nbsp&nbsp&nbsp
                 <SPAN class="crumbbar-cb">
                        <INPUT type=checkbox name="cb2" value="Production">Production</INPUT>
                </SPAN>      
</DIV>
<br/>
 



Here is the BlueCircle.gif file for your coding fun.  Thanks for helping me!

Open in new window

Comment
Watch Question

Author

Commented:
Here is the file.  I messed up.  
BlueCircle.gif
Easyily done using margin-left;
span.crumbbar-cb
{
text-align: right;
FONT-SIZE: 85%;
vertical-align: 35%;
margin-left:20px;
}

Open in new window

Author

Commented:
Thanks for the help.  It was indeed very simple. :)  I'm trying to get too many pages done in not enough time! Take care!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.